Layout: 100% width bands

This is a simple page layout with bands of color across the page.

The basic idea is to have outer and inner divs for each section, the outer set to width: 100% and the inner divs centered with a width and margin: 0 auto;

The body background color serves as the background for the header section and the footer, but extends to the bottom of the screen if there is extra space. (That's much nicer than having a white gap at the bottom of the page under the footer.) Of course, each section could have its own background color. It's up to you.

The .header, .main and .footer divs are given a width in ems to make them more elastic, but the columns within the .main div are given % widths so that they will adjust in width on narrow browsers. (Squeeze the browser to a narrow width to see the effect. Also try zooming in on the page to see how nicely everything fits at a large size.)

The .header, .main and .footer divs are set to overflow: hidden to ensure that they encose any floated content within them.

@media rules are added so that, on small screens like handhelds, the floated columns will be unfloated.

Return to original Page Affairs article.

For more details on the fluid/elastic nature of this layout, see the Fluid, Elastic, Fantastic! article.