Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Unwanted scrollbar being added, all browsers.

The body element expands to contain an absolutely positioned element

11:04 pm on Apr 7, 2010 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2009
posts: 23
votes: 0

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.

<div id="allContentWrapper">
<div id="header">
<div id="divLeft">Left box</div>
<div id="divRight">Right box</div>
<p>Both the left box and
Safari all act the same way.</p>
</div> <!-- endDiv allContentWrapper -->

This style information is in the head section:

<style type="text/css">
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 }
12:28 am on Apr 8, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 19, 2002
votes: 71

how wide is your window?

left 580px means the left edge will be 580px from the left
you are also giving it a width of 200px which means the right edge will be 780px from the left edge of the browser

also i'm sure you know there is no reason to place divLeft and divRight inside the wrapper as they are absolutely positioned, the relatively positioned wrapper will not make any difference to them.
12:39 am on Apr 8, 2010 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2009
posts: 23
votes: 0

They are inside the wrapper because the wrapper is centered. Think of it like a T, where the crossbar is made of the L and R divs and the upright part is the centered div that they are relative to.

So if the centered relative part is 600px wide and I put an absolute div with "right: 600px" inside it, the absolute div will rest against the left side of the centered div. The browser ignores it and there are no scrollbars until the window is less than 600px.

Putting the same type of div on the right side using the same technique make the scrollbars suddenly appear if the browser window is smaller than the width of the centered div plus the right div.
4:55 pm on Apr 8, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 14, 2008
posts: 85
votes: 0

Maybe i'm missing something here, but:

wrapper 600px
header 40px + 2em (assume default of 16px/em)
divLeft 200px
divRight 200px
Total 1072px

if your monitor resolution is 1024px, you're getting a scrollbar.
6:40 pm on Apr 8, 2010 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2009
votes: 0

What you're missing (or I'm missing and that's where the problem is) is that the divLeft and divRight are "position: absolute". They should have no effect on the page width. The header element is inside the wrapper, and shrinks as it should to allow the padding and margin. (I probably should have removed the margin and padding for this example, but on the simple page I made to show the problem I wanted to be able to see the wrapper.)

If divRight is removed, you get scroll bars at 600px -- the width of the wrapper. That is the way it should work. Adding divRight makes the scroll bars appear.
7:56 pm on Apr 8, 2010 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 14, 2008
votes: 0

I was not aware that 'position:absolute' will remove the element in question from the width calculation performed by the browser. Somehow, that doesn't quite seem right to me.
1:34 pm on Apr 12, 2010 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2009
votes: 0

Using Firebug, the body width changes with the size of the browser window. allContentWrapper stays at 600px. It's only the scroll bar existence that changes by adding divRight.

In the more typical case, like using position: absolute for a drop shadow, you expect it to not influence the page flow. It's one of the issues with using it to make a page column because it doesn't affect the length of the page.