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

I use

html { overflow-y: scroll; }

To standardize the scrollbar behavior in IE and FF

Answer 2

FWIW: I use

html { height: 101%; }

to force scrollbars to always appear in Firefox.

Answer 3

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 4

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

is my centered DIV

Answer 5

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.