Clear floats with overflow:auto;

You have scattered the web found lots of different hacks (example: .clearfix) on how to take care of that nasty problem with your floats overlapping. When all you needed to do was use the overflow property. Using overflow:auto; on the outer div will fix this float problem. A few tweaks must be done for div’s at the bottom but it’s way better than hacking. Works for all Grade A Browsers. Note: For IE MAC use overflow: hidden; since it will always display the scrollbars.

CSS

#doc {
	width: 100%;
	overflow:auto;
}
#left {
       width: 45%;
       float: left;
}
#right {
	width: 45%;
	float: right;
}

XHTML

<div id="doc">
<div id="left">LEFT</div>
<div id="right">RIGHT</div>
</div>