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だけのハックなどがあるようなのですが、何分まだ慣れてなくて、自力で解決するのは難しそうです。

上記のソースを見て何か助言いただくことができたら、お願いします。

回答No.1

leap_day · ベストアンサー

こんにちは

端折りすぎ(?)なのかちょっと崩れたような状態になっているので希望のものになってるか分かりませんが・・・
(大まかなので微調整はおこなってください）

<style type="text/css"><!--
div{border:1px solid; }

/*主な枠組み*/

#wrapper {
width:900px;
margin:auto;
}

#common_border {
margin: auto;
width:736px;
background-image:url(../img/common_border_back.jpg);
background-repeat:repeat-y;
padding-bottom:30px;
}

#common_border_top{
background-image:url(../img/common_border_top.jpg) ;
background-repeat:no-repeat;
width:736px;
height:10px;
margin:auto;
margin-top:10px;
}

#common_border_bottom{
background:url(../img/common_border_bottom.jpg)
background-repeat:no-repeat;
width:736px;
height:20px;
margin:auto;
margin-bottom:10px;
}

/*ナビ及び説明*/

.left {
float:left;
width:200px;
margin-left:25px;
}

.right {
float:left;
width:506px;
}

.right dl dt{
color:#8E2E00;
}

dl{
margin:0px;
}

h1 {
margin:0px;
background-image:url(../img/productexplain.jpg);
background-repeat:no-repeat;
}

--></style>

<!--[if IE]>
<style type="text/css">
<!--
/*IEに対するスタイル属性*/
.left {
margin-left:13px;
}
-->
</style>
<![endif]-->

<div id="wrapper">
<div id="common_border_top"></div>
<div id="common_border">

<div class="left"><a href="">ナビ1</a></div>
<div class="right"><h1>&nbsp;</h1></div>
<div style="clear:both;"></div>

<div class="left"><a href="">ナビ2</a></div>
<div class="right">
<dl>
<dt>内容1</dt>
<dd>説明が入ります。</dd>
</dl>
</div>
<div style="clear:both;"></div>

<div class="left"><a href="">ナビ3</a></div>
<div class="right">
<dl>
<dt>内容2</dt>
<dd>説明が入ります。</dd>
</dl>
</div>
<div style="clear:both;"></div>
</div>

<div id="common_border_bottom"></div>

</div>

IE7はもっていないので確認していませんが一応IE6,Firefox2,Opera9で同じになるようにしているつもりです
<style>頭　div{border:1px solid; }　は削除してください
Firefox,Operaは大体同じなのですがIEだけ少しサイズが違うので<!--[if IE]>～<![endif]-->で微調整するようになります

回答No.2

CHI-512

こんにちは。う～～ん。
単純に、

#l_navi {
float:left;
width: 200px;
}
#explain {
float: right;
width:506px;
}
#common_border_bottom {
clear: both;
}
でいいのでは？

#explainの左右マージンが×なんだと思います。
floatしてなおかつ右に余白を設けたいなら、
#explainの中に#explain-innerをいうDivを新たに作って、
#explain-inner {
width:486px;
}
などにするといいと思います。