The issue is that most (all?) browsers add a horizontal scrollbar when I add content that is using position: absolute.
Essentially the page is constructed as one fixed width, centered div that has another div inside it. The inside div is position: relative.
Inside that div are two more divs positioned absolute. Both are positioned outside of the containers: one to the left and one to the right. On the sample page (aack, can't post anything), they are called left box and right box.
Both the left box and the right box are positioned absolute. Why does adding the right box make the browser add a scroll bar? I thought that absolutely positioned elements had no effect on page layout.
If the right box is removed, the scroll bar goes away. Removing the left box has no effect. Both are the same size.
The main container, which is around this text container, continues to be centered in the window when the scrollbar is all the way to the left. The left and right boxes both go away at the same rate as the window is made smaller. So the browser is centering properly.
I've tried various overflow settings, but the ones that make the scrollbar go away also make it so that there is no scrollbar even when there should be one — which I define as when the allContentWrapper div can no longer be fully seen.
It's easy to watch what things have effect of the scrollbar using Firebug, if you have it.
Firefox, Chrome, IE7 and Safari all act the same way.
I've been Googling for quite awhile and haven't been able to find anything relating to this. Any thoughts?
The code I snipped the text in the "header" box, it's pretty much what I said above as the problem description.
<body>
<div id="allContentWrapper">
<div id="header">
<div id="divLeft">Left box</div>
<div id="divRight">Right box</div>
<p>Both the left box and
...snip...
Safari all act the same way.</p>
</div>
</div> <!-- endDiv allContentWrapper -->
</body>
This style information is in the head section:
<style type="text/css">
/*<![CDATA[*/
body, div { margin: 0; padding: 0 }
body { text-align: center; background-color: #333333 }
#allContentWrapper { background-color: #ccccee; width: 600px;
margin: 0 auto; text-align: left }
#header { position: relative; background-color: #eeeeee;
margin: 0 20px 20px 20px; padding: 1em }
#divLeft { text-align: center; position: absolute; height: 200px;
width: 200px; right: 580px; top: 20px; background-color: red }
#divRight { text-align: center; position: absolute; height: 200px;
width: 200px; left: 580px; top: 30px; background-color: green }
pre { overflow: auto }
.pad { padding: 1em }
/*]]>*/
</style>
