Question

This problem has been perplexing me for a while now, and I’ve tried researching it but so far I’ve just turned up sites that tell me how to center things but that’s not the problem. The problem is that while #content looks like it’s centered, when the page takes up more than one screen it causes the #content to appear about 5px to the left of where it appears when it is less than one screen in height. Is there a way to fix this without forcing my shorter pages to reach the bottom screen or beyond?

Here’s how I’m centering my content:

body {
    margin: 0;
    padding: 0;
}

#content {
width: 800px;
margin: 0 auto;
overflow: hidden;
padding: 0;
}

I’ll admit that there’s a couple more divs in there, but I don’t that’s really relevant to this problem…

Answer 1

The following CSS will force the vertical sidebar to appear, even on pages that are shorter than the viewport height. This will prevent the horizontal shift that you’re noticing.

html {
  overflow: -moz-scrollbars-vertical; 
  overflow-y: scroll;
}

Via http://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/