Position:absolute causes horizontal scrollbar

Question

Absolutely positioned (side yellow advertisements) div's cause unwanted horizontal scrollbar when window is resized (size decreased) beyond them. Scrollbar should appear only when window is smaller than main #container and these advertisement div's should not affect the layout. It doesnt matter if they get covered.

HTML:

<div id='topbar'>     <div id='menu'> <a href='#'>Link1</a>  <a href='#'>Link2</a>  <a href='#'>Link3</a>  <a href='#'>Link4</a>      </div> </div> <div id='container'>     <div id='pushfix'></div>     <div id='ad_container'>         <div id='ad1'>ad</div>         <div id='ad2'>ad</div>     </div> Lorem ipsum placeholder text </div> 

CSS:

body, html {     height:100%; } body {     margin:0; } #topbar {     width:100%;     background-color:#DCDCDC;     height:40px;     position:absolute; } #menu {     width:250px;     background-color:#B3B3B3;     margin:0 auto;     height:100%;     text-align:center;     line-height:40px; } #menu a {     color:#fff; } #container {     height:100%;     background-color:#808080;     width:240px;     padding:0 5px;     margin:0 auto; } #pushfix {     height:40px; } #ad_container {     position:relative;     width:240px; } #ad_container div {     width:100px;     background-color:yellow;     height:300px;     position:absolute; } #ad1 {     left:-105px; } #ad2 {     right:-105px; } 

Exact layout replica: http://jsfiddle.net/8UkQA/

Answer 1

Absolutely-positioned elements that expand beyond the boundaries of the body seem to cause scrollbars to appear, for some reason. You can remedy this by simply wrapping everything inside the body tag in a relatively-positioned div styled with overflow: hidden;. The absolutely positioned content that expands beyond the boundaries of this container won't cause scrollbars on the window.

Here's a working example: http://jsfiddle.net/8UkQA/1/