css

質問

http://www.geocities.jp/multi_column/float/04.html

ここにある、段組レイアウトなのですが、containerのwidthを800px、boxBのwidthを170px、boxCのwidthを630pxにしてみたら、崩れてしまいます。
boxBのwidthを180px、boxCのwidthを620pxにしたら、正常に戻ります。
ＢとＣの合計が、コンテナの幅になればいいはずなのに、崩れる場合
があるのは、どうしてでしょうか？

回答No.3

suzuko · ベストアンサー

IE6のバグだとどこかの記事で読んだ覚えがあります。

IEは１００％にwidthを指定すると崩れるし、全くwidthを指定しないとfloatが効かなくなるし、くせ者だそうです。ですからIEだけの裏技でwidthを0.1px指定する裏技もあるそうです。

ご質問の場合、800px170px628pxぐらいにすれば回避されると思いますが。

お礼

ありがとうございます。
バグなんですね。

回答No.2

kaiwarepon

先頭の
<?xml version="1.0" encoding="Shift_JIS"?>
から、
</html>
までをコピーして

#container {
width:800px;
}

#boxB {
width:170px;
float:left;
}

#boxC {
width:630px;
float:left;
}

を変更しただけですよね。

実験してみましたが、XP/IE6.0 でちゃんと表示されています。

ちょっと再現できないので、何とも言えませんが、
: とか ; とか px とか { } の書き方に間違いがないか確認して、
としか言いようがありません。ごめんなさい。

補足

ありがとうございました。
一応書き間違いはないのですが・・・。

boxCは、カラム落ちしませんでしょうか？

ん～、どしてなんでしょう。

回答No.1

kaiwarepon

実際に試されたHTMLおよびCSSソースとOS・ブラウザなどの環境を教えてください。

補足

上記のサイトの、「ＣＳＳでの段落のサンプル」を使用致しました。
widthの数値のみ変更、そのほか一切触っておりません。

os：windowsXP
ブラウザ：IE6

です。