CSS Window Maximisation Issue

Discussion in 'HTML' started by C Garrod, Nov 17, 2003.

  1. C Garrod

    C Garrod Guest

    Hello,

    I have been devloping a layout using CSS. The header consists of 3 DIV tags
    which segment the top of the page into 3 columns. The problem is when I
    open the page in a maximised window in MSIE6 the last DIV tag drops down a
    line and resides under the top left DIV.

    Has anyone come across this before? If so do you know a work around? This
    does not seem to occur in Netscape 7.0.

    The CSS Code is copied below...

    ..headleft {
    float: left;
    height: 69px;
    width: 33%;
    border-bottom-style: solid;
    border-bottom-color: 330066;
    color: #330066;
    }
    ..headright {
    float: left;
    height: 69px;
    width: 33%;
    text-align: right;
    border-bottom-style: solid;
    border-bottom-color: 330066;
    }
    ..headmid {

    height: 69px;
    float: left;
    width: 34%;
    text-align: center;
    border-bottom-style: solid;
    border-bottom-color: 330066;
    }

    And HTML if anyone wants to simulate the page...



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="styles/css.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <em></em>
    <div class="headleft"><span id="larger">Address Line 1</span><br>
    <span id="small">Line 2<br>Tel: (00000) 22 xxxx<br>Fax: (00000) 22 xxxx
    </span></div>
    <div class="headmid">Middle</div>
    <div class="headright">Right</div>
    </body></body>
    </html>


    --

    CMG
     
    C Garrod, Nov 17, 2003
    #1
    1. Advertising

  2. C Garrod

    Eric Bohlman Guest

    "C Garrod" <> wrote in
    news:bpaf2l$kmt$:

    > I have been devloping a layout using CSS. The header consists of 3 DIV
    > tags which segment the top of the page into 3 columns. The problem is
    > when I open the page in a maximised window in MSIE6 the last DIV tag
    > drops down a line and resides under the top left DIV.


    [snip]

    > .headmid {
    > height: 69px;
    > float: left;
    > width: 34%;
    > text-align: center;
    > border-bottom-style: solid;
    > border-bottom-color: 330066;
    > }


    If I change the width here to 33%, the problem goes away. I'm guessing
    it's some sort of rounding problem where some of the widths, when
    calculated, get rounded up to the nearest pixel giving a total width of
    slightly more than 100%.
     
    Eric Bohlman, Nov 17, 2003
    #2
    1. Advertising

  3. Eric Bohlman wrote:

    > "C Garrod" <> wrote in
    > news:bpaf2l$kmt$:
    >
    >> .headmid {
    >> height: 69px;
    >> float: left;
    >> width: 34%;
    >> text-align: center;
    >> border-bottom-style: solid;
    >> border-bottom-color: 330066;
    >> }

    >
    > If I change the width here to 33%, the problem goes away. I'm guessing
    > it's some sort of rounding problem where some of the widths, when
    > calculated, get rounded up to the nearest pixel giving a total width of
    > slightly more than 100%.


    And 33% + 33% + 34% + page margins and padding + borders on the divs =
    more than 100%.

    Also "border-bottom-color: 330066;" is missing its hash mark "#".

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
     
    Toby A Inkster, Nov 17, 2003
    #3
  4. C Garrod

    C Garrod Guest

    Thats great thanks, but now I have a 1% gap on the right hand side and it
    needs to cross the whole page from one side to the other :(

    Can anyone recommend a way to achieve this in CSS?

    Chris.

    "Toby A Inkster" <> wrote in message
    news:p...
    > Eric Bohlman wrote:
    >
    > > "C Garrod" <> wrote in
    > > news:bpaf2l$kmt$:
    > >
    > >> .headmid {
    > >> height: 69px;
    > >> float: left;
    > >> width: 34%;
    > >> text-align: center;
    > >> border-bottom-style: solid;
    > >> border-bottom-color: 330066;
    > >> }

    > >
    > > If I change the width here to 33%, the problem goes away. I'm guessing
    > > it's some sort of rounding problem where some of the widths, when
    > > calculated, get rounded up to the nearest pixel giving a total width of
    > > slightly more than 100%.

    >
    > And 33% + 33% + 34% + page margins and padding + borders on the divs =
    > more than 100%.
    >
    > Also "border-bottom-color: 330066;" is missing its hash mark "#".
    >
    > --
    > Toby A Inkster BSc (Hons) ARCS
    > Contact Me - http://www.goddamn.co.uk/tobyink/?page=132
    >
     
    C Garrod, Nov 17, 2003
    #4
  5. C Garrod wrote:

    [3-columns]

    > Thats great thanks, but now I have a 1% gap on the right hand side
    > and it needs to cross the whole page from one side to the other :(
    >
    > Can anyone recommend a way to achieve this in CSS?
    >


    Tricky to test without a URL. DIVs will expand to fill the space available
    to them - what happens (on your page) if you omit the width on the rightmost
    column?

    --
    William Tasso - http://WilliamTasso.com
     
    William Tasso, Nov 17, 2003
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Eric
    Replies:
    4
    Views:
    781
    clintonG
    Dec 24, 2004
  2. Andrew Bewley via DotNetMonster.com

    window to window communication (window.opener)

    Andrew Bewley via DotNetMonster.com, Feb 3, 2005, in forum: ASP .Net
    Replies:
    0
    Views:
    1,091
    Andrew Bewley via DotNetMonster.com
    Feb 3, 2005
  3. Whats up dog!

    Java Swing: JFrame Window Maximisation

    Whats up dog!, Jul 10, 2004, in forum: Java
    Replies:
    23
    Views:
    28,658
    felixm
    Aug 14, 2006
  4. tom watson

    print.css and screen.css

    tom watson, Sep 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    496
    Jukka K. Korpela
    Sep 9, 2003
  5. Russell
    Replies:
    2
    Views:
    327
    Russell
    Sep 13, 2004
Loading...

Share This Page