How Wide is Wide Enough?
Thursday, March 3, 2005While working on the design for this site, I ran into something of a problem. It wasn’t a major problem, since it wouldn’t happen very often. But, when it did happen, it was a real nuisance.
The site uses the Faux Columns idea. By placing one wide image as the background for my #container, it allows #main and #sidebar to appear to be the same height, even when they are not.
Everything was fine until I made my browser window small enough to require a horizontal scroll bar. Scrolling to the right, I found this:
Here’s what’s happening: #container, by default, has a width of “auto”. What does that mean? In this case, without margins, borders, or padding, that’s the width of the containing block. The containing block, in this case, is <body>.
<body> is an interesting fellow. If I understand things right, <body> encompasses the entire page. So, when a page is larger than the browser window (or viewport), the area outside the viewport is still enclosed by the <body>.
Which is what makes this problem strange. #container should be 100% of the width of the <body>, but it’s not — it’s 100% of the width of the viewport. That makes a huge difference. When you scroll to the right, #container does not exist in that area, so the background image is not drawn.
Since every browser I tried did the same thing, I suspect there is something in the spec that I am missing. Regardless, there is a solution: min-width.
By setting the min-width of #container to the width that a horizontal scroll bar would be required anyway, you can make sure your background image always extends at least far enough. Of course, Internet Explorer does not support min-width. I went with a Javascript solution. If you are browsing with Internet Explorer with Javascript turned off, well, God help you, you’ve got bigger problems than just my site.