div width 100%?

Discussion in 'HTML' started by Rich West, Jan 15, 2004.

  1. Rich West

    Rich West Guest

    Can anyone tell my what I'm doing wrong here: http://www.tsmithstudio.com .
    I've set the width of the div at the top of the page to 100% and with IE6,
    there's a gap at the right edge of the page. (NS7 works as I'd expact with
    no gap.) I've tried setting it larger, but I'm trying to avoid the
    horizontal scroll bar.

    Thanks in advance for your help.

    Rich West
     
    Rich West, Jan 15, 2004
    #1
    1. Advertising

  2. Rich West

    Richard Guest

    Rich West wrote:

    > Can anyone tell my what I'm doing wrong here: http://www.tsmithstudio.com
    > . I've set the width of the div at the top of the page to 100% and with
    > IE6, there's a gap at the right edge of the page. (NS7 works as I'd
    > expact with no gap.) I've tried setting it larger, but I'm trying to
    > avoid the horizontal scroll bar.


    > Thanks in advance for your help.


    > Rich West


    Set to 99% or 98%. IE brings out the scroll bar due to the hidden border of
    divisions.
    Try it with a table with no borders and you'll have the same result.
     
    Richard, Jan 15, 2004
    #2
    1. Advertising

  3. Rich West

    Rich West Guest

    Thanks, but no dice. Still have the gap at 99%, 98%... I can set it to
    102.2% and close the gap, but NS7 puts a horizontal scroll bar (as it
    should, I guess).


    "Richard" <anonymous@127.000> wrote in message
    news:...
    > Rich West wrote:
    >
    > > Can anyone tell my what I'm doing wrong here:

    http://www.tsmithstudio.com
    > > . I've set the width of the div at the top of the page to 100% and with
    > > IE6, there's a gap at the right edge of the page. (NS7 works as I'd
    > > expact with no gap.) I've tried setting it larger, but I'm trying to
    > > avoid the horizontal scroll bar.

    >
    > > Thanks in advance for your help.

    >
    > > Rich West

    >
    > Set to 99% or 98%. IE brings out the scroll bar due to the hidden border

    of
    > divisions.
    > Try it with a table with no borders and you'll have the same result.
    >
    >
     
    Rich West, Jan 15, 2004
    #3
  4. Rich West

    Steve Pugh Guest

    "Rich West" <> wrote:

    >Can anyone tell my what I'm doing wrong here: http://www.tsmithstudio.com .
    >I've set the width of the div at the top of the page to 100% and with IE6,
    >there's a gap at the right edge of the page. (NS7 works as I'd expact with
    >no gap.) I've tried setting it larger, but I'm trying to avoid the
    >horizontal scroll bar.


    You've absolutely positioned the top div, with a width of 100%. The
    width is being calculated before the positioning and so the width is
    the width of the browser window minus the default margin.

    Adding margin: 0; to the styles for body will correct the display in
    IE 5 - 6.

    I would not have used absolute positioing for that layout. It creates
    brittle layouts that fall apart in browser window sizes, and with text
    sizes, that depart from the mean. Even a modest text zoom of 120% in
    Mozilla begins to show problems.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jan 15, 2004
    #4
  5. Rich West

    Steve Pugh Guest

    "Richard" <anonymous@127.000> wrote:
    > Rich West wrote:
    >
    > > Can anyone tell my what I'm doing wrong here: http://www.tsmithstudio.com
    > > . I've set the width of the div at the top of the page to 100% and with
    > > IE6, there's a gap at the right edge of the page. (NS7 works as I'd
    > > expact with no gap.) I've tried setting it larger, but I'm trying to
    > > avoid the horizontal scroll bar.

    >
    >Set to 99% or 98%. IE brings out the scroll bar due to the hidden border of
    >divisions.


    Didn't you read what he wrote? 100% is leaving a gap. Why do you think
    that making it smaller than 100% will remove that gap (i.e. make teh
    div wider than it was at 100%)?

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Jan 15, 2004
    #5
  6. Rich West

    Rich West Guest

    Thank you. That did it: including margin: 0px in the body selector. And
    thank you for your advice regarding the absolute positioning. It's hard for
    me to give up control - guess I need a shrink and not an html news group for
    that ;-) I'll try to rework the site without the absolute positioning..

    Rich


    "Steve Pugh" <> wrote in message
    news:...
    > "Rich West" <> wrote:
    >
    > >Can anyone tell my what I'm doing wrong here: http://www.tsmithstudio.com

    ..
    > >I've set the width of the div at the top of the page to 100% and with

    IE6,
    > >there's a gap at the right edge of the page. (NS7 works as I'd expact

    with
    > >no gap.) I've tried setting it larger, but I'm trying to avoid the
    > >horizontal scroll bar.

    >
    > You've absolutely positioned the top div, with a width of 100%. The
    > width is being calculated before the positioning and so the width is
    > the width of the browser window minus the default margin.
    >
    > Adding margin: 0; to the styles for body will correct the display in
    > IE 5 - 6.
    >
    > I would not have used absolute positioing for that layout. It creates
    > brittle layouts that fall apart in browser window sizes, and with text
    > sizes, that depart from the mean. Even a modest text zoom of 120% in
    > Mozilla begins to show problems.
    >
    > Steve
    >
    > --
    > "My theories appal you, my heresies outrage you,
    > I never answer letters and you don't like my tie." - The Doctor
    >
    > Steve Pugh <> <http://steve.pugh.net/>
     
    Rich West, Jan 15, 2004
    #6
  7. In article <yMANb.22436$XD5.10451@fed1read06>, Rich West says...

    > Can anyone tell my what I'm doing wrong here: http://www.tsmithstudio.com.


    You're using an external stylesheet as the same time as style attributes
    in your divs.

    Where you have:

    <div id="terry" style="position:absolute; left:14px; etc, etc

    You really want:

    * terry.css *

    div#terry {
    position:absolute;
    left:14px;
    etc, etc
    }

    * index.html *

    <div id="terry">stuff</div>

    > I've set the width of the div at the top of the page to 100% and with IE6,
    > there's a gap at the right edge of the page.


    Looks fine in both IE6 and Opera 7.23.

    > I've tried setting it larger


    Don't set a div width larger than 100%.

    I'm not seeing a gap, but try adding "padding:0" to 'body' in terry.css.

    --
    Daniel Ruscoe
    http://www.dualstone.co.uk
    Web design in Bolton, Manchester
     
    Daniel Ruscoe, Jan 15, 2004
    #7
    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. Not4u
    Replies:
    9
    Views:
    1,056
    Not4u
    Feb 27, 2004
  2. Replies:
    8
    Views:
    6,710
    Neredbojias
    Dec 9, 2005
  3. Replies:
    7
    Views:
    194
    Tad McClellan
    Jun 22, 2006
  4. fred
    Replies:
    3
    Views:
    291
    Zifud
    Mar 17, 2005
  5. Replies:
    5
    Views:
    902
Loading...

Share This Page