views:

321

answers:

8

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?

A: 

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.

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

is my centered DIV

IceHeat
A: 

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.

Ross
A: 

http://www.brack.nl/

IceHeat
+7  A: 

I use

html { overflow-y: scroll; }

To standardize the scrollbar behavior in IE and FF

John Sheehan
A: 

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

Ross
A: 

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

IceHeat
+2  A: 

FWIW: I use

html { height: 101%; }

to force scrollbars to always appear in Firefox.

Carl Camera