IE7のfloatの回り込みがうまくきません

お疲れ様です。いつもお世話になっております。 FF2、Opera、IE7という3つのブラウザでコーディングしたHTMLをチェックしている状態です。 下記に問題のHTMLとCSSを記述します。 <div id="common_border"> <div id="common_border_side"> <div id="common_border_top"></div> <div id="l_navi"> <ul> <li id="l_navi_1"><a href="">ナビ1</a></li> <li id="l_navi_2"><a href="">ナビ2</a></li> <li id="l_navi_3"><a href="">ナビ3</a></li> </ul> </div> <div id="explain"> <h1>説明</h1> <dl> <dt>内容1</dt> <dd>説明が入ります。</dd> </dl> <dl> <dt>内容2</dt> <dd>説明が入ります。</dd> </dl> </div> <div id="common_border_bottom"></div> </div> </div> </div> common_borderのtop,bottomは丸角の枠画像です。 sideには1pxの背景画像が入ります。 /*---------丸角の枠線を表示するCSS--------------*/ #wrapper #common_border{ width:736px; margin:10px 82px; padding:0; } #wrapper #common_border_top{ background:url(../img/common_border_top.jpg) no-repeat; height:10px; padding:0; margin:0; } #wrapper #common_border_side{ background:url(../img/common_border_back.jpg) repeat-y; margin:0; padding:0; } #wrapper #common_border_bottom{ background:url(../img/common_border_bottom.jpg) no-repeat; height:20px; padding:0; margin:0; } /*----------------左のナビゲーション------------------*/ #wrapper #l_navi{ float:left; margin:0; padding:0; width:200px; } #wrapper #l_navi ul{ list-style:none; padding:0 20px; margin:25px 0; } #wrapper #l_navi ul li{ margin:0 0 5px; } /*-------------説明部分-----------------*/ h1{ text-indent:-9999px; background:url(../img/productexplain.jpg) no-repeat; margin:20px 0 10px 180px; } p{ margin:0; padding:0; } #explain{ text-align:left; width:506px; margin:0 35px 30px 15px; padding:0; } #explain dl dt{ color:#8E2E00; } 差し障りのないようところどころ端折ってます。 出来上がりは適当ですが、下記のようになります 　丸角の枠線画像（上） 　ナビ1 h1の説明 　ナビ2　説明1 　ナビ3　説明2 　丸角の枠線画像（下） ナビをfloat:leftにしていて、explainにはfloatをかけていません。 explainをfloatすると、なぜか丸角の枠線画像（下）の下にナビ、explainともに表示されてしまうためです。 なので、ナビにfloatをかけた状態で、そのナビを内包するかたちでexplainに左のmarginを210pxとり、 explainのwidthを680pxほどにすることで、OperaとFFはきれいに表示されました。 ボーダーを表示させると 　　丸角枠線画像（上） ┏━━━━━━━━━━━ ┃┏━━━┓　h1 ┃┃ナビ１┃　説明 と、強制的な感じです。 ところが、IE7だとこれがうまくいかず、つまり、floatされたナビを内包できずに、widthが足りず、 丸角の枠736px-（ナビ200px+説明680px）でマイナスになり、説明がナビの下に来てしまうような状態です。 なんとか足りるようにピクセルを合わせると、IE7ではきれいに見えるが、Opera,FFで崩れてしまいます。 IE7だけのハックなどがあるようなのですが、何分まだ慣れてなくて、自力で解決するのは難しそうです。 上記のソースを見て何か助言いただくことができたら、お願いします。