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 will stretch to fit the available space.

This happens because the header and footer are given "min-width" values that are equal to the set width of the content area. This ensures the header and footer are fluid on all sizes of browser windows.

View the demo without "min-width"

< Back to the article