David Kendall

There is a definate trend emerging towards having a website centered horizontally on the page. Not a problem for many using the margin: auto css (remember though to assign a width to the element being centered otherwise margin: auto won`t work) but there is a slight pecadillo that messes this up slightly, the scrollbar on the browser.

Decent browsers (Firefox, Opera, Safari etc) hide the scrollbar until it is needed which nicely provides a little extra space to play with, but if the next page on the website is quite long and requires a scrollbar or if you use css/javascript to show/hide content the page appears to jump when the srollbar is displayed.

This looks tacky.

I am not a big fan of tacky so looked into a solution to stop this from happening, I envisaged some nasty javascript hack but luckily css has a nifty little answer to the problem.

html {
            overflow-y: scroll;
}

That tiny piece of css forces a vertical scrollbar on your browser. Unfortunately Opera doesn`t support this but there is an Mozilla alternative

overflow: -moz-scrollbars-vertical

Job done, scrollbars on the page even if the content on the page doesn`t need them. No more nasty jumping around on the page.