CSSでボックスのheightが0になる

質問

http://css-happylife.com/

上のサイト(私のサイトではないです)で、

<div id="contentsInner">
<div id="main">
</div>
<div id="sub">
</div>
</div>

という部分があります。
CSSはだいたい下のような感じです。

#contentsInner {
margin:0pt auto;
position:relative;
width:910px;
}
#main {
float:left;
overflow:hidden;
width:500px;
}
#sub {
float:right;
margin-top:20px;
padding:8px 0pt 8px 10px;
width:390px;
}

Firebugで確認したところ、
#mainの大きさは500 x 1552
#subの大きさは390 x 1305
に対し、
#contentsInnerの大きさは910 x 0
と、高さが0になっています。
もちろん、#contentsInnnerに背景画像を設定しても
表示されることはありません。
ブラウザもheight=0と認識しているようです。

なぜ高さが0になってしまっているのでしょうか。
このバグ？の対策を教えてください。
よろしくお願いします。

回答No.1

steel_gray · ベストアンサー

http://www.y-adagio.com/public/standards/tr_css2/visudet.html#q16
こちらにあるようにfloadしているボックスの高さは無視されますので、
バグでもなんでもなくて正しい挙動です。
(古いIEではこれを無視しないという誤った挙動をしていました。現在でも互換モードではその動作を継承します。)

http://www.geocities.jp/multi_column/float/05.html
http://www.fsiki.com/archive/css-doc/float.html
こちらが対処のヒントになると思います。

お礼

これはバグではなかったんですね、
参照サイトの指示通りに更新したら、高さを得ることができました。
昔からこの表示のされかたに戸惑っていたんです。
ありがとうございました。