homepage Welcome to WebmasterWorld Guest from 54.163.70.249
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Unwanted scrollbar being added, all browsers.
The body element expands to contain an absolutely positioned element
OPunWide




msg:4111751
 11:04 pm on Apr 7, 2010 (gmt 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.

<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>

 

topr8




msg:4111758
 12:28 am on Apr 8, 2010 (gmt 0)

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.

OPunWide




msg:4111762
 12:39 am on Apr 8, 2010 (gmt 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.

Trav




msg:4112469
 4:55 pm on Apr 8, 2010 (gmt 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.

OPunWide




msg:4112529
 6:40 pm on Apr 8, 2010 (gmt 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.

Trav




msg:4112575
 7:56 pm on Apr 8, 2010 (gmt 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.

OPunWide




msg:4114308
 1:34 pm on Apr 12, 2010 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved