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. Read more >>