1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Scroll bar being added in all browsers

Can make it go away by removing one absolutely positioned div

         

OPunWide

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

10+ Year Member



Sorry this post is so long, but it is hard to describe and when I asked elsewhere I just got questions trying to clarify what the page looked like. I've been looking for an answer for one week now, and hope that this section might work better than the HTML and Browser section.


The issue is that most (all?) browsers add a horizontal scrollbar when I add certain content that is using position: absolute. But I think that absolute positioned content should not affect the flow.


Essentially the page is constructed as a single fixed width, centered div, id="mainWrapper". That div has another div inside it for the header, id="header". This inner div is position: relative.

Inside the header div are two more divs, both positioned absolute and are given a width value. Both are positioned outside of the containers: one to the left and one to the right. In the code they are id="divLeft and id="divRight".

To see the problem, make the browser window, and hence the body width, less than the width of divLeft plus mainWrapper. Using the code below, that is less than 800px. A horizontal scroll bar is visible. Now change the width of divRight to 0, or make it display: none, or anything else to get it out of the way. Now the scroll bar is gone. So having divLeft has no effect on the scroll bar, but adding in divRight makes it appear.


Other observations:

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, mainWrapper, 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 mainWrapper div can no longer be fully seen.

It's easy to watch what things have effect on 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?

Here is the code for entire page: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>

<style type="text/css"> 
/*<![CDATA[*/ 
body, div { margin: 0; padding: 0 } 
body { text-align: center } 
#mainWrapper{ background-color: #ccccee; width: 600px; margin: 0 auto; } 
#header { position: relative; background-color: #eeeeee }
#divLeft, #divRight { position: absolute; height: 200px; width: 200px; }
#divLeft { right: 600px; top: 0px; background-color: red } 
#divRight { left: 600px; top: 0px; background-color: green } 
/*]]>*/ 
</style>
</head>

<body> 
<div id="mainWrapper"> 
<div id="header"> 
<div id="divLeft">Left box</div> 
<div id="divRight">Right box</div> 
<p>Some text.</p> 
</div> 
</div> <!-- endDiv mainWrapper--> 
</body>
</html>


In answer to another place I asked this question, and to help you visualize it:

divLeft and divRight 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.

Note also that mainWrapper stays at 600px width, showing that the absolute positioned divs inside it have no effect on it's size, as expected.

webeno

12:12 pm on Apr 16, 2010 (gmt 0)

10+ Year Member



well, or i didn't understand your question very well, or the code you placed is different from what you use, but i tested it in Firfox and Chrome and i see no scroll bar.

maybe this will help: instead of absolute positioning, the recommended way multiple columns should be placed side by side is using the float property.

Let me post an example: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>

<style type="text/css">
/*<![CDATA[*/
body, div { margin: 0; padding: 0 }
body { text-align: center }
#mainWrapper{ background-color: #ccccee; width: 1000px; margin: 0 auto; }
#header { float: left; background-color: #eeeeee; width: 600px; }
#divLeft, #divRight { height: 200px; width: 200px; }
#divLeft { float:left; top: 0px; background-color: red }
#divRight { float: right; top: 0px; background-color: green }
/*]]>*/
</style>
</head>

<body>
<div id="mainWrapper">
<div id="divLeft">Left box</div>
<div id="header">Some text</div>
<div id="divRight">Right box</div>
</div>
</body>
</html>


mind that in order the layout stays consistent, you have to set the wrapper div's width to at least the sum of your sub-divs' width.

hope this helps

OPunWide

2:14 pm on Apr 16, 2010 (gmt 0)

10+ Year Member



I just copied and pasted the code I posted and I see the issue in both. Of course, it goes away if the browser window is larger than 1000px.

Your solution doesn't suit me because the scroll bar will always be there. I guess explaining the why of what I'm doing will help.

The goal if for divLeft and divRight to add background images around the main content in mainWrapper. There won't be any text content, just a background image in the divs. It should behave like it was just part of the body background, but I can't put the images there (for reasons will just confuse the issue further, so lets skip that part).

This works for divLeft: it just looks like part of the background and doesn't affect the browser's concept of the width of the page. Adding divRight adds the scroll bar, and from a user's standpoint makes them wonder if there is more stuff to the right. Especially because in my real code, the widths aren't 200px, but 1000px, so it looks like you're only seeing half the page unless you scroll. But all you see when you scroll is the background image and color.

webeno

3:23 pm on Apr 16, 2010 (gmt 0)

10+ Year Member



i added overflow:hidden to the body, div selector and the scroll bar disappeared. i also added a background image in mainWrapper and the scroll bar was still hidden.

OPunWide

8:00 pm on Apr 16, 2010 (gmt 0)

10+ Year Member



Yes, but I won't get the scroll bar when the content needs it. When the browser window is less than 600px, the scroll bar needs to be there to see all of mainWrapper.

Interesting: when I add overflow:auto to mainWrapper, it gets scroll bars. You can scroll to the right to see the dirRight, but it is impossible to see divLeft. Maybe this isn't just a body issue.

OPunWide

3:19 pm on Apr 23, 2010 (gmt 0)

10+ Year Member



Since nobody seems to be able to help, I'll bump this and put up an example: < sorry - no examples see CSS Charter [webmasterworld.com] >
I hope it lasts and somebody tries experimenting to see the issue.

[edited by: tedster at 9:03 pm (utc) on May 1, 2010]

webeno

9:47 am on Apr 24, 2010 (gmt 0)

10+ Year Member



try with adding more wrapper divs around the existing ones and add the overflow according to your needs.

BenTrein

8:19 am on Apr 27, 2010 (gmt 0)

10+ Year Member



I'm very inexperienced, so call me stupid if it is such. But could it be that the browser (mistakenly) thinks there is a need for a horizontal scroll bar because the divRight falls outside the mainwrapper, yet in the html it is set in the mainwrapper (so my thought is that the browser thinks the mainwrapper is the size of the screen, and if something falls outside that, it needs the scrollbar). This may be a symptom, but I have no solution ready.
It is clearly also system/station independent, because also I can't reproduce the problem with the code you've given us, using Opera 10.1 and FireFox 3.5 on a Linux machine.

OPunWide

1:17 pm on Apr 27, 2010 (gmt 0)

10+ Year Member



Interesting. Every browser I checked has the problem. Please read what I wrote again. I tried to be clear, but I'm more than capable of screwing that up. Browser window size is the key. No offense, but it you're a newbie this might be beyond you. But if you want to tackle it, please dig in. You're kind of on the right track about the right div falling outside, but why doesn't it care about the left one? This has been a difficult problem to describe. There's always that tradeoff off too many words to make it clear and enough to bore people. Thanks for giving it a shot.

The real big mystery for me is that the browser doesn't care about the left div, only the right one.

OPunWide

1:45 pm on Apr 27, 2010 (gmt 0)

10+ Year Member



BenTrein, FYI, I'm on XP. Sorry I was a little harsh, but I've been trying to get this solved for over one month. (I posted elsewhere first) I've been doing this stuff since the early '90s, so I don't typically post here until I'm really really stuck. It gets frustrating because people don't read carefully, they just seem to guess. And then I have to re-clarify what I wrote. If you're on a Mac and don't see this, well, that's interesting news. Not an option for me, unfortunately. So are you saying that when your browser window is smaller than 1000px that you don't see scroll bars, but only when it's less than 600px?

BenTrein

12:37 am on Apr 28, 2010 (gmt 0)

10+ Year Member



Forgive me if I appear not to have read carefully, but what I didn't get from your text is that your trying to get the scrollbars to ignore div-right and div-left boxes. This makes me curious as your reasons (why would you want a part of your website to become invisible at smaller browser sizes? Maybe this causes lack of interest from more experienced developers) but that to the side.
I'm not on a mac, but on Linux. When I start playing with the presence of div-right and div-left I indeed get the same symptoms as you. Forgive me for not trying extensively enough yesterday. div-left disappears nicely off the screen to the left if I decrease the browser size, but div-right doesn't.
I still stand by my earlier idea that it's an aligning issue in the programming of all browsers - the only time a horizontal scroll bar is created, is when things start falling off the screen on the right. That is the only thing they listen to, because whenever you zoom, the left alignment stays on the left side of the browser, and it doesn't create a horizontal scroll bar till it's grown beyond the size of the browser TO THE RIGHT. I don't know how to better explain it. But I think it has to do with the programming of the browsers... Good luck with it! I have no solution. Sorry.

BenTrein

3:06 am on Apr 28, 2010 (gmt 0)

10+ Year Member



Having toyed around with this some more, I'm sure what you want can't be done - yet. A browser's horizontal scrollbar will always ignore what falls off the left of the screen; see my example below, the "Some text" falls off the left, yet there's no scrollbar. However, as soon as something falls off the right of the screen, there's a horizontal scrollbar - whatever you do, whatever happens. Suggest an addition to the CSS with the W3C! I still wonder why you would want something hidden so badly, but perhaps they'll include it as an option in CSS 6.

BenTrein

3:07 am on Apr 28, 2010 (gmt 0)

10+ Year Member



Sorry, I forgot to add my example. Here is it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>

<style type="text/css">
/*<![CDATA[*/
body, div { margin: 0; padding: 0; }
body { text-align: center; }
#mainWrapper{ background-color: #ccccee; width: 600px; margin: 0 auto; }
#header { position: relative; background-color: #eeeeee; }
#main {position: absolute; top: 0px; left: -300px; background-color:#eeeeee; }
#divLeft, #divRight { position: absolute; height: 200px; width: 200px; }
#divLeft { right: 600px; top: 0px; background-color: red; }
#divRight { left: 600px; top: 0px; background-color: green; }
/*]]>*/
</style>
</head>

<body>
<div id="mainWrapper">
<div id="header">
<div id="divLeft">Left box</div>
<div id="divRight">Right box</div>
<div id="main">Some text.</div>
</div>
</div> <!-- endDiv mainWrapper-->
</body>
</html>

OPunWide

7:40 pm on May 1, 2010 (gmt 0)

10+ Year Member



I want it because it's a background image that is purely decorative. I don't want it to look like there's content out there.

Definitely don't understand why a browser would ignore something to the left, yet not the right. And with the same behavior withing a div. Absolute positioned elements aren't supposed to affect flow at all. This is in violation of that.

Oh well, I give up.

tangor

7:50 pm on May 1, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Could be just me, but adding up your div widths I come up with 1800px of divs stuck inside the wrapper.

I'd suggest removing all size declarations to see if it lays out the way you like (and stick a 1px border on each just to see where the divs are located).

(edit) Better yet, look at some three column css layouts (bing or google). There are many fine examples out there.

OPunWide

8:09 pm on May 1, 2010 (gmt 0)

10+ Year Member



One of the problems with a long thread like this. I tried to simplify it at one point, and may have made a mistake when I copied the code. It you look at the linked example, from the 4/23 post, it's a 600px mainWrapper with two 200px side divs.

If you look up how absolute positioned elements _should_ work, they don't have any effect, so you don't add them in.

I think we've both seen the issue now. I used background colors to show where the divs are to avoid issues with adding width to the boxes and then having to explain that to people here. It just add complexity.

The 3 column examples are almost all examples of how to show all 3 columns, which isn't the goal here.

tangor

8:34 pm on May 1, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Lost me on that one... looked like three columns to me with a header div stuck to the top of the center column. :)

If this is a head banger then I do suggest looking at a three column layout (define left and right columns and float appropriately, don't define center) and stuff those inside a max width wrapper. There are several ways of doing this. Sorry, we can't give out links... but you might check out zengarden for a number of examples.

OPunWide

8:45 pm on May 1, 2010 (gmt 0)

10+ Year Member



You're way off track. They're just background images. No content. Not important to the way the site works.

Think of it this way: only the center div has content But there is a big, 5000px background image for the body element that stretches off the page. There will be no scroll bars. The viewer only sees the portion of the image that is within their browser window.

That's how I want it to work, but for reasons not worth going into, I can't do it that way.

Don't you think that I looked at as much as I could before I spent all this time posting here? I tried all sorts of stuff to get this to work, all dead ends, so it was time to see if there was any help out there.

That's why it's time to give up. Too much time spent. You're probably right that it's browser misbehavior. It looks against the specs to me. It was just when all the browsers acted the same way I had to wonder: What's up with that?!?

tangor

8:52 pm on May 1, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The content of your left/right divs is not the question. The real question is why is there a 5000px image involved?

No wonder it doesn't work! Yes, think giving up is appropriate (there aren't too many monitors with 5000px wide screens). And if there were, I'm pretty sure no one could read the text.

Is there a reason the image (just the part you want visible) cannot be cropped to a more reasonable size?

tangor

8:54 pm on May 1, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



About the only thing I can think of is to apply that huge image as background to the BODY then try all your other methods.

You have to get the image OUTSIDE of the divs, Otherwise it will cause problems.

OPunWide

9:46 pm on May 1, 2010 (gmt 0)

10+ Year Member



Well, I think you have grasped the problem, to a degree. Like I said, I can't use a body background. And I said 5000px to make the point it could be big.

As an aside, it might sound big now, but maybe not in a couple of years. It used to be that you would never design for anything wider than 750px. Things change.

One reason you use an absurdly large image is so those wide screens have something to look at. You put the content in something narrow so it works on small screens and so people don't have to do horizontal scrolling. They generally hate that.

So you're wrong, the content of my left/right divs does matter: it's there for the large screens, now and future. And the reason it's can't cause scroll bars is because people with small screens will scroll to see what's there, find nothing useful, and get annoyed with having to scroll to check it.

Just my design philosophy. Usually done with the body background; not possible this time.

tangor

10:19 pm on May 1, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Interesting. I was coding for the web back when 640x480 was standard and it took a few years to get me to code for 800x600. :)

These days I code to readable text line length (ie, not edge to edge max screen) and float appropriate then let the chips fall where they may. Odd thing is that 5-12% (and growing) users these days view the web on 320x240 (and that other odd small size) screens (mobiles) and if one doesn't code for that segment (or the weird size netbooks, and iPads), one could lose a lot of visitors. Currently running 1680x1050. Can't read half of the 1em sites, much less those running 10px! I need all that landscape and 3x or 4x zoom on my browser to see the letters... then again I'm sixty and my eyes aren't quite as good as they used to be.

Freely admit I haven't a clue as to your design philosophy. What little experience I've had since 1995 isn't sufficient to wrap my head around it. Meanwhile, it took about 5 years to bump screen resolution from 1024x768 to 1680x1050 so you might have 2...3 years before 5000x and up screens are available. :)

OPunWide

10:31 pm on May 1, 2010 (gmt 0)

10+ Year Member



I don't code for the small screens. It takes a separate layout. A lot of my stuff is JavaScript and graphics, so there's just no point thinking about small screens for me.

And you got that right about the 640. It took a while. But back then, if I had known how and if browsers behaved properly, I would have coded for 550 with a background the made it look okay on 800.

tangor

11:03 pm on May 1, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



We all go where we go... I don't code for IE6 (not for a year or so) but these days I'm thinking small (phones, iPad, kindle size machines) as that is (my opinion) the next big audience. The tech geeks are still there but the "ma bell" style users out number us, just like the movie goers, dvd renters, etc. have always out numbered the geeks... and these days they want it personal, on a phone or one of those easy to carry tablets.

Huge screens aren't easy to carry around. :)

Personally, I try to avoid coding to two platforms... just more work, I'm getting lazy in my old age. Then again, most of my stuff is simple text (content) or (for the commercial sites) product descriptions and darn few images are used... particularly background... and the javascript is held to the absolute minimum since there are so many (and increasing) users with JS turned OFF that it is reserved for the cart. A different philosophy... that's all that is.

Still curious... is it your BACKGROUND image that is breaking your design? If so, how big is it?

OPunWide

11:18 pm on May 1, 2010 (gmt 0)

10+ Year Member



What I posted was simplified. I already have a bg image. This is another image that needs to float with the content to look right. So the background is fine.

I saw something nice on another site using this technique on the left, and I wanted it on both sides. I'd tell you where, but they're already threatening to cancel my account for posting the example earlier. Makes things difficult, doesn't it.

tangor

2:00 pm on May 2, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



That's what sticky mail is for... :)

ibolee

2:32 am on Jul 17, 2010 (gmt 0)

10+ Year Member



ID key is good~

commanderW

6:55 am on Jul 17, 2010 (gmt 0)

10+ Year Member



Hello - It looks like I got here a bit late, but -

Iit seems to me that there is a problem with incorrect syntax for the positon: absolute; and position: relative; poperties.

OPunWide - Your first example contains - 
#header { position: relative; background-color: #eeeeee }
#divLeft, #divRight { position: absolute; height: 200px; width: 200px; }
#divLeft { right: 600px; top: 0px; background-color: red } 
#divRight { left: 600px; top: 0px; background-color: green }


BenTrerin has 
#header { position: relative; background-color: #eeeeee; } 
#main {position: absolute; top: 0px; left: -300px; background-color:#eeeeee; } 
#divLeft, #divRight { position: absolute; height: 200px; width: 200px; } 
#divLeft { right: 600px; top: 0px; background-color: red; } 
#divRight { left: 600px; top: 0px; background-color: green; }


I am pretty sure that the only part of the above which is correct is the one line from BenTrein 
#main {position: absolute; top: 0px; left: -300px; background-color:#eeeeee; }


Furthermore, if the code is corrected ( with the shortcut) to read 

#divLeft, #divRight { position: absolute; right: 600px; top: 0px; background-color: red; height: 200px; width: 200px; }


Then the 2 divs are being placed on top of each other with no z-indexing.

OPunWide, in my humble opinion, your code is a mess ! It looks to me as if you are relatively new to coding and unsure of your syntax. I highly recommend 2 things. Read the many posts here. Especially in the libraries. Search for terms on Webmaster World as well.
Also make use of the references and tutorials at w3schools[w3schools.com ]

I might be missing something or misreading this entire thread, and I don't yet understand exactly what it is you are trying to do, but I hope this observation helps.

OPunWide

4:34 pm on Jul 18, 2010 (gmt 0)

10+ Year Member



@commanderW - perhaps you could tell me what the problem is instead of saying it's wrong. The code validates as correct CSS. It does what I want except for the scroll bar issue.

I don't know why you would want to change it to put one box on top of the other, except to show that you don't understand the issue. If you don't understand the code or the issue, please don't guess and then tell others to go get some education and that their code is a mess. I've likely been doing this longer than you.

If you have something useful to contribute, please do. But understand what the thread is about first.

commanderW

4:47 am on Jul 19, 2010 (gmt 0)

10+ Year Member



OPunWide - No offense intended. But are you sure your implementation of the position: absolute and position:relative properties are correct? For instance these 2 lines -

#divLeft, #divRight { position: absolute; height: 200px; width: 200px; }
#divLeft { right: 600px; top: 0px; background-color: red }


It looks to me like the instructions for positioning are bracketed in the second line. Shouldn't it look like this? -

#divLeft, #divRight { position: absolute; right: 600px; top: 0px;}

Like I said, maybe I'm missing something. Maybe I don't know the trick. But it looks wrong. And I see this in alot of the code posted in this forum.

I'm not pretending to be an expert, just trying to help as best I can.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 4:26 pm May 1, 2026