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.
background: #FFF url(../i/gfx_bkg_main.gif) repeat-y;
<font color='Blue'>width: 950px;</font>/<font color='DarkGreen'>*IE6/7 haslayout = float containment*/</font>
padding: 0 15px 20px;
<font color='Blue'>overflow: hidden;</font><font color='DarkGreen'>/*float containment*/</font>
border-top: 20px solid #FFF;
border-bottom: 20px solid #FFF;
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.
I would remove the height from your wrapper div though, heights really should not be set on pages that need to expand with content.
<font color='Red'>/*height: 1100px;*/</font>
margin: 0px auto;