Browser scrollbar

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?

From stackoverflow IceHeat

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

  From Ross

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

  is my centered DIV

  From IceHeat

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

  From Ross

• http://www.brack.nl/

  From IceHeat

• I use

  html { overflow-y: scroll; }
  

  To standardize the scrollbar behavior in IE and FF

  From John Sheehan

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

  From Ross

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

  From IceHeat

• FWIW: I use

  html { height: 101%; }
  

  to force scrollbars to always appear in Firefox.

  From Carl Camera