How Wide is Wide Enough?Thursday, March 3, 2005
While 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
#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> 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
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:
By setting the
#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