title: Collapsing floats in 960 grid
body: <p>I am trying to use the 960 grid system with header and footer graphics at the top and bottom of the page. These graphics need to go wider than the 960 grid. The header works fine - a DIV, position absolute, width 100%, and centered, does the job perfectly.</p>
  
  <p>But now I want the same thing, but at the bottom of the page. I.e. aligned with the bottom of the footer section. I figured I would attach the background image to the bottom of the <code>.container_16</code> div, positioned on the bottom. This way, the footer image would always stay with the bottom of the content.</p>
  
  <p>Here is my attempt so far:
  <a href="http://www.northtreestudios.com/sandbox" rel="nofollow noreferrer">http://www.northtreestudios.com/sandbox</a></p>
  
  <p>The red line is the border of the <code>body</code> tag, and the blue line the border of the <code>.container_16</code> div. I put a clearing div (<code>&lt;div class="clear"&gt;&lt;/div&gt;</code>) everywhere I could think of, but I nothing I do will get either the <code>.container_16</code> div or the <code>body</code> tag to expand to include the footer!</p>
  
  <p>I have been scouring the web for hours, and I am running out of ideas ...</p>