![]() ![]() 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): But in this case, it fixes the issue quite nicely. 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. The illustration below shows how the header and footer fail to expand as desired: 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). 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. When you view the demo, try resizing the window to below 960px. To see what I’m talking about, I’ve set up a demo page that has the layout characteristics described above: 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. 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. ![]() 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. 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. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |