960 Grid System and Full Width Backgrounds

Out of the box, the 960 Grid System can accomplish just about any complex website layout you can imagine. There are times, though, when you're going to have to do some minor customizing to cleanly accomplish what you want.

For example, lets pretend we want to have a full width background for our header and footer. We'll need to make some sort of wrapper to go around the grid like this:

.whole {
 width: 100%;
}

.branding {
 background: url("tile_branding.png") repeat;
}

With these new classes in place we can build a workable (but bloated) solution that would look something like this:

<div class="whole branding">
 <div class="container">
  <header class="grid_12">
   <!-- blah blah blah I'm a header -->
  </header>
  <span class="clear"></span>
 </div>
</div>

<div class="container">
 <div class="grid_12">
  <!-- Page content goes here -->
 </div>
 <span class="clear"></span>
</div>

<div class="whole branding">
 <div class="container">
  <footer class="grid_12">
   <!-- And finally, the foot. -->
  </footer>
  <span class="clear"></span>
 </div>
</div>

The above lazy approach isn't too bad, but we can do better. I'd be a lot more satisfied without those pointless .container divs wrapping the header and footer. Let's make some adjustments to the css:

.whole {
 ...
}

.branding {
 ...
}

.whole header,
.whole footer {
 margin: 0 auto;
 width: 940px;
}

Now in our HTML we can drop the .container wrappers around our header/footer as well as drop our header/footer classes.

<div class="whole branding">
  <header>
   <!-- blah blah blah I'm a header -->
  </header>
  <span class="clear"></span>
</div>

<div class="container">
 <div class="grid_12">
  <!-- Page content goes here -->
 </div>
 <span class="clear"></span>
</div>

<div class="whole branding">
  <footer>
   <!-- And finally, the foot. -->
  </footer>
  <span class="clear"></span>
</div>

Tada! A clean, simple approach to full width backgrounds using the 960 Grid System. Enjoy.