Originally Posted by Todd Temple
As I mentioned above there is no need for any new divs in the html. Ryan's suggestion was to wrap everything after the image in a div and set "haslayout" on it. The text would not wrap under your right image if you did that though. There was never anything mentioned about adding a "clearfix", your floats are being contained just fine. The overflow:hidden on your #main is taking care of float containment and the width there is giving haslayout to IE6/7 which will contain floats.
As long as you remove the 100% width on the #content h2 that I noted in my last post IE6/7 will be just fine.
background: #FFF url(../i/gfx_bkg_main.gif) repeat-y;
width: 950px;/*IE6/7 haslayout = float containment*/
padding: 0 15px 20px;
overflow: hidden;/*float containment*/
border-top: 20px solid #FFF;
border-bottom: 20px solid #FFF;
I would remove the height from your wrapper div though, heights really should not be set on pages that need to expand with content.
margin: 0px auto;