DIVの入れ子で、FireFoxだとレイアウトが崩れる。

質問

DIVの入れ子で、FireFoxだとレイアウトが崩れる。

http://www.cool-vivi.com/?p=222
このサイトの通りにやったのですが、
FireFoxだとうまく表示されません。
下記のソースから<div id="main">を消して、入れ子じゃない状態にするとうまくいきます。
どうすればいいでしょうか？

<div id="main">
<div id="menu">
</div>
<div id="contents">
</div>
</div>

回答No.2

noname#119957 · ベストアンサー

ＩＥは、高さ指定しなくても自動的に調整するようにできています。
しかし、その他のブラウザでは、高さは自動的に補完されません。かといって、高さをピクセル指定すると、文字のみ拡大したときにおかしな具合になります。

高さを指定するのは、特別な場合、たとえば画像だけを配置するときなどです。
そこで、clear:both;が良く使用されます。

<div id=cont">
<div id="head"></div>

<div id="left">

</div>

<div id="right">

</div>
<div id="footter">copy right (c) aaaaaaaa</div>
</div>

#cont{
clear:both;
width:800px;
}

#head{
width:800px;
height:50px;
clear:both;
/*画像のヘッダーの場合は高さを指定可能*/
}

#left{
width:200px;
float:left;
}

#right{
float:right;
width:600px;
}

#footter {
width:800px;
height:2em;
line-height:2em;
clear:both;
}

とすると、ＩＥでも、firefoxでも崩れないとおもいますよ。
ここで、head と　footterが clear:both;
であることが、要点つまり、こつです。
こうすると、回り込みしなくなります。
つまり左右になにも配置しないことを意味します。

＃１のクリヤ問題はこのことです。

ＩＥでは、clear:both;しなくても、contの中にすべてを含めてくれるかもしれませんね。
つまり、高さを自動的に補完してくれます。

回答No.1

naokita

何が上手くいかないのか？、CSSが無いと誰も回答出来ないよ。
Firefoxって事だから、旧IEを使ってる思うけど誤解釈、おそらくクリアーの問題かな？
色々方法があるけど、

<div id="main">
<div id="menu">
</div>
<div id="contents">
</div>
<div style="clear: both;">
</div>
</div>