The header and footer on this page are fluid, while the content section is a fixed width of 960px, and centered using "margin: auto". When the viewport is resized to (or starts out) below 960px (creating scrollbars), the header and footer do not stretch the width of the available space, but only stretch up to the point where the scrollbars begin. As a result, some of the main content will expand past the width of the header and footer.

This is not a bug; it occurs in all browsers. It's an undesired result of the correct implementation of block elements that don't have a set width.

This issue can be fixed by setting a min-width of 960px on the header and the footer. IE6 (surprise) doesn't support min values, so the fix works in every browser except that one.

< Back to the article