title: position: absolute inside position: relative causes content to overlap
body: <p>I have a <code>main</code> element I have set to <code>position: relative</code>. This contains two <code>div</code>s that I then apply <code>position: absolute</code> on. This then causes the header and footer that sandwich the <code>main</code> element to then bump up against each other. How can I stop this?</p>
  
  <p>Using floats and clearing the footer seems to give the two column layout I want. But I'm not sure how “sturdy” a solution that is and what'll happen on IE6/7.</p>
  
  <p>Code on <a href="http://codepen.io/jonnybarnes/pen/lgqdr" rel="nofollow">codepen</a>.</p>