How do you center an e.g. 960px wide website layout?

Question

...without using margin:0 auto;

Why? It causes pages with a scrollbar to have a different center position than those pages without scrollbar, so when navigating through pages, divs are jumping. What would you suggest, guys?

Answer 1

I'm afraid the "jumping" effect is unavoidable because the scrollbars affect the viewport width, which in turn affects the centreline of the page. This happens regardless of technique ( text-align: center; , position: -50%; , etc).

The workaround is to force the vertical scrollbar to always appear. Use this:

html { overflow-y: scroll; }

From here , but you can disregard most of the samples on that page and jump to the bottom.

Note that overflow-x and overflow-y were originally Microsoft extensions on the CSS2.x standard overflow property. However both overflow-x and overflow-y are in CSS3.

Answer 2

One way is to give overflow-y: scroll; to the HTML tag on all your pages, so they'll show up with a scroll bar on the right (inactive for the pages that don't need it). This way you'll have the same client width for all pages.

Answer 3

Pure CSS? Only to force the scrollbar to always appear, as other answers have said.

Another route would via JavaScript - detect on DOM ready whether the page has a scrollbar, and nudge the container accordingly.

Answer 4

Try this :

.width960container{
    width:960px;
    min-height:500px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-250px 0 0 -480px;
}