title: Most efficient and compatible way to achieve docked footer
body: <p>I am trying to do the following in a CSS template:</p>
  
  <ol>
  <li>Dock the footer to the bottom when there is not enough content to
  fill the page </li>
  <li>Stretch the header and footer background across the whole width</li>
  <li>Position all the content in the middle of the page</li>
  </ol>
  
  <p>This is the code I have, created with help on here:
  <a href="http://tinkerbin.com/lCNs7Upq" rel="nofollow">http://tinkerbin.com/lCNs7Upq</a></p>
  
  <p>My question is, I have seen a few ways to achieve this. Is this the best? It seems a shame to have to have the empty div as well, is this a bodge?</p>