Page Shift and Centered Designs
The Page Shift Problem
I resisted centering Diplograph for the longest time, despite how much better it looked, because of an obnoxious issue sometimes called the "page shift problem". Say you have a page like this:
But then, if the page was just a little bit longer, a scrollbar pops in and the viewport—the area inside the browser window where the page shows up—becomes just a little bit narrower.
Compare the position of the centered text and how the left-justified paragraph wraps. Now imagine something like your website's navigation ending up in a different place just because the page was a little bit longer than the previous one.
Joy Overflowing
This simple little problem bothered me a lot. But then I realized: if I forced the scrollbar to show up all the time, it wouldn't be a problem. There's no way to control the vertical scrollbar independently from the horizontal scrollbar in CSS 2, but in the CSS 3 Box Model there are separate overflow-x and overflow-y properties.
body {
overflow-y: scroll;
}
BAM. Even if the page is short you get a nice, inactive scrollbar on the side.
Everything lays out the same on every page regardless of its height, and though you now have an empty scrollbar it's still very clear you can't scroll the page.
overflow-x and overflow-y turn out to have been pretty well supported in all major browsers for a while now. No need for any JavaScript hacks, no need for browser-specific properties, and if a visitor has a really old browser the property is silently ignored and there's no real harm done. Sweet.
That's it, post's over, no need to keep reading. Everything else is unfocused ranting.
Don't Do This
When Googling around a bit I found more than a few well-meaning people recommending this:
html {
min-height: 100%;
margin-bottom: 1px;
}I'm not a fan of this approach at all. It forces the page to be at least one pixel taller than your viewport. And while it's true you'll get a vertical scrollbar, it will always be an active scrollbar on a page that really isn't scrollable. No matter how large you resize your window, the page will always be just a little bit too big to fit.
It looks like you can scroll the page, but there really isn't any additional page content. Why would you do that to yourself? Why would you do that to your visitors?
Why would you do that to me? *whine*
This whole vertical scrollbar thing turns out to be one of those weird, complicated issues that has been argued to death over the years. Should browsers show the vertical scrollbar by default, as IE does? Or hide them but pretend the sixteen or so pixels are unavailable when laying out the page like older versions of Opera? Mozilla Bug 72540 is a dark and disturbing glimpse into the world of vertical scrollbars.
Personally, I'm perfectly happy now that I've realized I have an acceptable solution for my own pages. I think this is one of those design issues that differs from site to site and should be left to the author.
But then, I'm the site author in this case, so I'm biased.