Home/ Questions/Q 6905581
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T08:12:04+00:00

I’m a real CSS beginner, so please forgive my ignorance. I’ve been searching around

  • 0

I’m a real CSS beginner, so please forgive my ignorance. I’ve been searching around without success regarding something which must be obvious to experienced CSS folks.

Basically the CSS below displays as expected in FF/Chrome/IE8, but not in IE6 (and who knows about other IE versions). In IE6 a friggin horizontal scrollbar keeps being displayed since some elements are overflowing the browser window. My reading seems to indicate this has something to do with padding, 100% width being a problem with IE6, or something… I’ve added bg colours to better visualise the problem.

I only really want the #ch/div (“head”) to fill the browser window horizontally. I suppose it boils down to: why are the div’s for bs_ext and cd extending beyond the right-hand browser window, causing the horizontal scrollbar to be displayed?

<head>
<style>
<!--
body{margin:0px 0px 0px 0px}

#ch,#cs{position:relative;width:100%}
#ch{margin-top:0px;height:90px;background-color:#edeff4;border-bottom:1px solid 
#dddddd}
#cs{height:55px;width:1024px;border-bottom:1px solid #dddddd}
#cb{width:1024px}
#ci{float:left;width:200px;background-color:#efefef}
#cr{float:left;width:530px;background-color:#cccccc}
#cd{float:left;width:294px;background-color:#dddddd}

#bs{position:relative;float:left;top:18px;left:15px;width:185px;background-
color:#cccccc}
#bs_ext{position:relative;float:left;top:18px;left:15px;width:824px;background-
color:#dddddd}

-->
</style>
</head>
<body>
<div id=ch>head</div>
<div id=cs>
    <div id=bs><span>sssssss</span></div>
    <div id=bs_ext><span>ppppppp</span></div>
</div>
<div id=cb>
<div id=ci>111<br>111<br>111<br></div>
<div id=cr>222<br>222<br>222<br></div>
<div id=cd>333<br>333<br>333<br></div>
</div>
</body>

I would appreciate any pointers on how to make this work in IE6.

Also, I’d like the bottom border of #cs to be 100% of the browser at all times (it’s currently 1024px). But, if I use “100%”, then when resizing the browser moves “ppppppp” down – I’d like it to be fixed so that resizing the browser does not change the content position.

Thank you so much for any pointers/assistance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Short answer:

    • bs_ext is 824px wide, so any browser (not just IE6) will display a scrollbar if browser size goes below that
    • cd is positioned 200+530px from the left and is 294px wide, meaning it extends to 1024px which is too wide (any browser uses about 16 pixels of the window’s width to be used for a vertical scrollbar)

    Also:

    • Go with bvd’s suggestion; don’t try to optimize for IE6 too much
    • Try to build the site in IE6 first and modern browsers later.

    Solutions:

    The following CSS will remove any scrollbars on the html/body of your page. A terrible fix, as you’re destroying the user’s tools to navigate your site:

    html, body { overflow: hidden }

    Also, if you want a footer that sticks to the bottom of the page (I’m not sure if you do but it looks that way), try to follow this tutorial:

    http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

    Lastly, if you want more help, I suggest you post a picture or design of what you’re trying to achieve. A lot is possible in IE6, if you know how to work around CSS imperfections that browser has.

    A final tip is modernizr: http://www.modernizr.com/
    Modernizr solves a lot of IE6 issues, but not all. Also, you’ll have a JavaScript dependency in your website which will affect at least IE6 and 7 users.

    Good luck!

    • 0