Databases
StackOverflow2013
Postsdbo
POSomething in CSS is causing horizontal scroll in IE6
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSomething in CSS is causing horizontal scroll in IE6
    text
    copied!<p>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.</p> <p>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.</p> <p>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?</p> <pre><code>&lt;head&gt; &lt;style&gt; &lt;!-- 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} --&gt; &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=ch&gt;head&lt;/div&gt; &lt;div id=cs&gt; &lt;div id=bs&gt;&lt;span&gt;sssssss&lt;/span&gt;&lt;/div&gt; &lt;div id=bs_ext&gt;&lt;span&gt;ppppppp&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id=cb&gt; &lt;div id=ci&gt;111&lt;br&gt;111&lt;br&gt;111&lt;br&gt;&lt;/div&gt; &lt;div id=cr&gt;222&lt;br&gt;222&lt;br&gt;222&lt;br&gt;&lt;/div&gt; &lt;div id=cd&gt;333&lt;br&gt;333&lt;br&gt;333&lt;br&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>I would appreciate any pointers on how to make this work in IE6.</p> <p>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.</p> <p>Thank you so much for any pointers/assistance</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload