Relative positioning div overlapping bottom content - css

Question

I'm trying to do a mobile first responsive layout. So on my HTML I have
First - Middle Content
Then - Left Content
Then - Right Content
and below all the content, I have a separate section of information that goes full width from left to right.
I'm using position:absolute for Middle,Left and Right divs to position them. My problem is, because the main 3 divs are absolutely positioned, the separate section goes below the main content and overlaps. How can I fix this?
I have a working fiddle here.

Answer 1

Basic floats example: http://jsfiddle.net/UKKcq/11
Basic display: inline-block example: http://jsfiddle.net/UKKcq/19/
There's a fair few things to consider here:
First, you'll notice in the second example, the text from the main section starts below all 3 divs. This is because they are still part of the flow of the document whereas when using floats they are not so the text wraps around them.
Also, with the second example, I had to delete all spacing/line breaks between the divs to stop a space appearing in-between them. This happens all the time with inline-blocks and I use the following jQuery function to fix it to avoid ruining the neatness of my markup:
jQuery.fn.cleanWhitespace = function() {
textNodes = this.contents().filter(
function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
.remove();
return this;
}
})();
$('INSERTPARENTDIVHERE').cleanWhitespace();
Furthermore, I had to use vertical-align:top as by default the shortest div (in this case the center), was aligning with the bottom of the other two divs.
One final consideration is that inline-block layouts such as this have a tendency to break when the user zooms using their browser or if the width, padding, border or margin were to change for any reason. You have relative control over the latter factors but to ensure things aren't dropping to the next line (which can look really bad) when the user zooms I recommend applying white-space: nowrap; to the parent div to try and prevent this.