title: Relative positioning div overlapping bottom content
body: <p>I'm trying to do a mobile first responsive layout. So on my HTML I have </p>
  
  <pre><code>First - Middle Content
  Then - Left Content
  Then - Right Content
  </code></pre>
  
  <p>and below all the content, I have a separate section of information that goes full width from left to right. </p>
  
  <p>I'm using <code>position:absolute</code> for Middle,Left and Right <code>div</code>s to position them. My problem is, because the main 3 <code>div</code>s are absolutely positioned, the separate section goes below the main content and overlaps. How can I fix this? </p>
  
  <p>I have a working fiddle <a href="http://jsfiddle.net/UKKcq/1/" rel="nofollow">here</a>.</p>