The following scenario might sound quite familiar to the one or the other web designer / web developer: you have a nicely centered layout, but of course some pages have less content than others. For example the contact page can be quite short, if it only features a contact form and some contact details.

So – basically everything is in shape, the layout behaves well – web design by the pixel – only one or two pages don’t have a scrollbar, all the others do. Basically this would not be that dramatic – most browsers will not bother about the little difference and instead display all pages equal. But some browsers don’t. Instead the centered layout is positioned a few pixels to the right, if the scrollbar is missing – or the other way round: the layout ‘jumps’ a fex pixels to the left, if the current page has a scrollbar.

There is a simple scc-trick to solve this problem of ‘jumping’ centered layouts. You just have to force the browser to provide the space for a scrollbar – whether there is a scrollbar or not. Here is the corresponding css-code:

html {
    overflow-y: scroll;
}

Just put the above css snippet in your stylesheet and you’re basically safe. However the above code is actually not really valid css, but who cares anyways. It does solve the problem – and it’s compatible with most modern browsers. According to css-tricks.com only older versions of Opera are not cooperating.