CSSの崩れについて

質問

CSSにて横2段組のボックスを組んだところ、右側の内容がなぜか左側のボックスの下にも表示されてしまいます。

**html**

<!-- out_wrap -->
<div id="out_wrap">

<!-- inner_wrap -->
<div id="inner_wrap">

<!-- left_Contents -->
<div id="left_Contents">
<p>AAAA</p>
</div><!-- /left_Contents -->

<!-- right_Contents -->
<div id="right_Contents">
<p>A</p>
</div><!-- /right_Contents -->

</div><!-- inner_wrap -->
</div><!-- out_wrap -->

**css**

@charset 'Shift_JIS';

body{
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
text-align : center;
background : #333333;
color:#4f4d45;
}

#out_wrap{
margin-left : auto;
margin-right : auto;
width : 980px;
padding-top : 20px;
background-color : #FFFFFF;
}
#inner_wrap{
margin-left : 10px;
margin-right : 10px;
width : 960px;
}
#left_Contents{
width : 650px;
float : left;
margin-right :10px ;
line-height : 200%;
text-align : left;
background-color : #000000;
}
#right_Contents{
width : 300px;
float : right;
line-height : 200%;
text-align : left;
background-color : #999999;
}

*************************************************************
右ボックスの A と打った文字が左側下にも表示されてしまいます。
marginの計算もあっていると思うのですが、しかもIE6でこのような現象です。Firefox最新版では大丈夫です。

よろしくお願いします。

回答No.2

abril · ベストアンサー

おそらく、下記などで説明されている現象が起きているものと思われます。

【参考】http://hane.itigo.jp/archives/60

IE6がfloat関係で抱えている悪名高いバグの一つですね。
私も何度かこの現象に出くわした事があります。解決方法は上記にもありますが、コメントを消す、という方法が（バグの原因が該当するのであれば）一番手っ取り早い様です。

お礼

直りました。
コメント部分が邪魔をしていたようです。
大変参考になりました、ありがとうございます。

<!-- right_Contents -->
<div id="right_Contents">

ではなく

<div id="right_Contents"><!-- right_Contents -->

こうすれば問題なかったです。

回答No.1

RedPiyoyo

「#left_Contents」の「margin-right:10px」を無くしてみては？