IE6とIE7でfloatレイアウトのずれ対処法

質問

質問させていただきます。

当方制作のWEBサイトのレイアウトの一部が
IE6と7のみで崩れてしまいます。

画像のように、正しくはbox1とbox2を横並びに配置したいのですが、
IE6と7のみbox1の下にbox2がきてしまいます。
FirefoxやOpera.Safariでは崩れません。

具体的な内容は下記です。

画像のような配置で、box1.box2.box3が配置されています。

現在box1.box2.box3のCSSは下記です。

.box1
{float:left;
width:60%;
height:112px;
}

.box2{
color:#333;
float:none;
width:39%;
height:108px;
overflow:auto;
margin:5px;
border:2px dotted #6ebef2;
background-color:#FFF;
padding:0px;
font-size: 9pt;
}

box3 {
width : 100% ;
height : 20px ;
background-color:white;
text-align: right;
margin-top: 10px;
margin-bottom: 10px;}

html上では以下のように記述しています。

<div class="box1">
本文
</div>
<div class="box2">
本文
</div>
<div id="box3">
本文
</div>

何分独学で制作しておりますので、
ここのところで非常につまづいております。
３時間考えてもできませんでした....。

もし対処法をご存知でしたら、
教えていただけますと大変助かります。
よろしくお願い致しますm(_ _)m

回答No.1

naokita · ベストアンサー

60%とか39%だと、borderが2px×数本入れると100%をオーバーしてしまう可能性がある。
marginを設定すると計算も狂う。
float:left;

これらの設計（数値）を計算というか想定しないとNGです・・・
また、DTDの過去/標準のモードによっても計算方法が違います・・・

旧IEでも過去モードでも標準モードでも両方の条件で同じ表示、またリキッドにするならDIVを二重にする方法が安全です。
※構造や方向性が一本ならこのように多重DIVを利用する事はないのですが・・・

<div id="box"><div id="box2">
<div class="box1"><div>本文</div></div>
<div class="box2"><div>本文</div></div>
<div id="box3"><div>本文</div></div>
</div></div>

#box{width:80%; border:1px solid black;}
#box2{ margin:5px;}
#box2 div div{ border:2px dotted #6ebef2;}
.box1{ float:left;width:60%;}
.box2{ float:right;width:39%;}
#box3 { clear:both; padding:10px 0;}
#box3 div{ height : 20px; background-color:white; text-align: right;}

お礼

よくわかりました。ありがとうございます。