After redesigning this website, and realizing that I’ve been way too nonchalant about different window sizes, I came across an issue that probably occurs in a lot of different layouts.
The problem happens under the following circumstances: (1) The header and footer of the page have no specified width; (2) The content area has a specified width, and is centered using
margin: auto; (3) The window is resized below the content area’s width, or the window starts out below the set width of the content area.
In most cases, this issue will go unnoticed, because generally speaking, sites are designed to fit within the 960px standard width, which will be fine for most users. Because my monitor’s resolution is set to higher than 1024×768 (which is small in the web design community nowadays), the problem was occurring on my own site, which has for a while now been designed for a larger than average width.
To see what I’m talking about, I’ve set up a demo page that has the layout characteristics described above:
When you view the demo, try resizing the window to below 960px. You’ll notice that a horizontal scrollbar will appear, and the supposedly-fluid header and footer will only expand to the width of the window, instead of the width of the available space.
This is not a browser bug, it’s just an undesired result (similar to the undesired result of floated elements being removed from flow and causing their parent to collapse). This happens in every browser I tested. The illustration below shows how the header and footer fail to expand as desired:
Resolved with “min-width”
I have to admit, because of the lack of support in IE6 for the
min-width property, I have rarely used that property in my layouts. But in this case, it fixes the issue quite nicely.
Take a look at the second demo page using the button below, and you’ll see that the header and footer will now expand to at least the width of the content area even when the window is resized to below 960px (which is the size of the content in this example):
Evidently, something similar was posted on Stack Overflow and one of the proposed solutions was to use
display: table and
display: table-cell to get the header and footer to behave like tables, expanding to fit the available space. But the table-related values for
display are not supported by IE6 and IE7, so that solution is probably not as good as using
min-width, which is supported by IE7.
Does anyone know another solution to this problem? Or is there some other way the layout can be structured to ensure this doesn’t occur? Anything obvious I’m overlooking?
min-width: 960pxon the
<body>tag, which saves a line of CSS.