div入れ子の背景画像

質問

【CSS】
#layout{
width:755px;
margin:auto;
background-color:#ffff00;
background-image:url(img/back.gif);
background-repeat:repeat-y;}

#menu{
width:168px;
margin:0px;
padding:0px;
float:left;}

#main{
width:570px;
background-color:#ffffff;
padding:0px 0px 0px 10px;
float:left;}

【html】
<div id="layout">
　<div id="menu">メニュー</div>
　<div id="main">メイン</div>
</div>

レイアウトで指定した背景画像を縦に繰り返し表示させたいのですが、
上記のCSSだとIEはOKなのですが、foxが表示されません。
メニューidにはデザイン上背景画像は設定できません。
また、
<div id="layout">
あああ
</div>
を試したら背景画像が表示されましたので、パスの間違いはありません。

どうすれば良いでしょうか？
知恵をお貸しいただけますでしょうか。
宜しくお願い致します。

回答No.1

grumpy_the_dwarf · ベストアンサー

ここでもさんざん言われていることですが、このソースでlayoutの
背景が表示されるのはIEのCSS解釈が間違っているからです。

layoutの中身が全部floatになってますよね。規則では、floatして
いる要素は、親から見て高さを持たないことになっています。中身
の高さが全部ゼロなんだったら親の高さはゼロですから、背景を表
示する場所がありません。

mainの下にclear:bothして何か書けばいいので、フッタでも置く
か、clearfixという名前で知られるハックを使います。