Browser scrollbar

Question

I have a website that is perfectely centered aligned. The CSS code works fine. The problem doesn't really have to do with CSS. I have headers for each page that perfectely match eachother.

However, when the content gets larger, Opera and FireFox show a scrollbar at the left so you can scroll to the content not on the screen. This makes my site jump a few pixels to the left. Thus the headers are not perfectely aligned anymore.

IE always has a scrollbar, so the site never jumps around in IE.

Does anyone know a JavaScript/CSS/HTML solution for this problem?

Answer 1

Are you aligning with percentage widths or fixed widths? I'm also guessing you're applying a background to the body - I've had this problem myself.

It'll be much easier to help you if you upload the page so we can see the source code however.

Answer 2

   #middle 
   {     
position: relative;
margin: 0px auto 0px auto;  
width: 1000px; 
max-width: 1000px;
}

is my centered DIV

Answer 3

Well you don't need the position: relative; - it should work fine without it.

I take it that div has to be 1000px wide? It would still be a lot easier to answer this with the actual website.

Answer 4

http://www.brack.nl/

Answer 5

I use

html { overflow-y: scroll; }

To standardize the scrollbar behavior in IE and FF

Answer 6

Well i don't see the problem with it but John's suggestion will work (I'd upmod but I'm out).

Answer 7

Now there are actually two scrollbars, which is also a bit off.

Answer 8

FWIW: I use

html { height: 101%; }

to force scrollbars to always appear in Firefox.