CSS position change/problem

Question

I have just finish that site, but there is a silly bug that remain...

if you check tu horizontal position of the WHOLE page there is a slight shift... nothing to cry about but WHY

here is the 2 pages

http://jlecologia.com/index.php

http://jlecologia.com/entreprise.php

any idea, the horizontal css is:

#wrapper {
    position:relative; /* center, not in IE5 */
    width:856px;
    top: 38px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    display: block;
    padding: 0px;
}

i dont like my page to do the cha-cha-cha !

Answer 1

The viewport of the browser is expanded when there is no need for the vertical scrollbar. Since your design is horizontally centered, the centering will shift when the viewport expands. That's the cause of the cha-cha-cha (and don't let your dance instructor tell you differently).

If you feel strongly about it, you can force the vertical scrollbar to always be displayed like this:

html { min-height: 100%; margin-bottom: 1px; }
* html { height: 100%; } /* for ie 6 */

Answer 2

The page with more content has the scrollbar on the right.

Because you have a horizontally centered page, the width of the page with the scrollbar is a few pixels narrower causing the centered portion to shift left.