The mysterious sideways jump, a.k.a. scrollbar present or not present

Just in the last couple of weeks, several clients have asked why their sites appear to jump a few pixels sideways when they navigate from one page to another.

The sideways jump appears on sites with horizontally centered layouts and is caused by the browser displaying a vertical scrollbar or not, depending on the height of the page. If you move from a short page that doesn’t need a vertical scrollbar to a tall page that does need one, the entire site is moved to the left to make room for the scrollbar. And vice versa, of course.

It isn’t a mystery or a bug, but simply the way most browsers work. As far as I know, the only browser that always displays a vertical scrollbar is Internet Explorer for Windows, version 7 and older. All other browsers I have checked in display it only when it is needed.

In other words, next time you see a site jump sideways a few pixels when you navigate from one page to another, keep an eye on the vertical scrollbar.

Update: Several readers have told me that you can use CSS to force a vertical scrollbar in other browsers than IE <= 7. I suppose that’s yet another trick to be aware of, but it would take an extremely persuasive client to make me use it.

Posted on May 19, 2009 in Browsers

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.