CSS tip for centered site designs — sebduggan.uk Skip to main content

CSS tip for centered site designs

A quick tip for when you're designing a site with centered content.

If the content doesn't reach to the bottom of the window, there's no vertical scroll bar; if you then navigate to a longer page, you'll see the content jump about 10px to the left as it's centered in a slightly narrower window. Sometimes, you'll even see this jump half-way through rendering a longer page.

To solve this, simply add this to your CSS:

html { overflow-y: scroll; }

Now, you'll always have space reserved for the vertical scrollbar, whether or not it's required; and you won't see the sideways jumping any more.