Layout: Full Width Bands

This site, like many others, uses a layout of what I’m calling “full width bands” of color—where the header, content and footer backgrounds stretch the full width of the screen. It’s a nice effect, and is easy to do. Below is a link to a demo / example template that you can use in your own designs.

View/download the code here

How It Works

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;. Here is the HTML:

<div class="header-outer">
<div class="header">
</div>
</div>

<div class="main-outer">
<div class="main">
</div>
</div>

<div class="footer-outer">
<div class="footer">
</div>
</div>

And here’s the CSS:

.header-outer, .main-outer, .footer-outer {
width: 100%;
}

.header, .main, .footer {
margin: 0 auto;
width: 50em;
}

Now, you can set full width colors for the header, main and footer sections. However, I prefer not to have the appearance of a gap under the footer on shorter pages, so I prefer to set a background color on the body element that then serves as the background color for the .header-outer and .footer-outer sections, but also means the footer color will extend to the bottom of the page no matter how short it is. You could, of course, have a different color for the .header-outer section if you prefer.

The body background color serves as the background for the .header-outer section and the .footer-outer, 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.

At any rate, you need to set a background color for the .main-outer section.

body {
background: #30353b;
}

.main-outer {
background: #fff;
}

In my example, 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.

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

.section {
overflow: hidden;
}

@media only screen and (min-width: 980px) {
.element {
  styles here
}
}