マンガでよめる痔のこと・薬のこと

【html】
<div id="wrapper">
<div id="top"></div>
<div id="middle">
<div id="a"></div>
<div id="b"></div>
</div>
</div>
【css】
* { margin:0; padding:0; }
body { background:url(../img/common/bg.gif) repeat}
#wrapper { width:800px; margin:0 auto;}
#top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;}
#middle { background-color:#FFF; padding:0 50px 100px 50px;}
#a { float:left; width:360px; height:100px; background-color:#009966;}
#b { float:left; width:340px; height:150px; background-color:#CC0033;}
-------------------------------------
上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。
どこが間違っているのか教えて頂けますか?初心者ですので、よろしくお願い致します。

「CSS floatについて教えて下さい。」の質問画像

A 回答 (1件)

floatはちゃんとclearしないと親要素に高さが反映されません。


今回の場合はbの後にclearを指定できる要素が無いので#middleにoverflow:hidden;を指定します。
そうすることで#middleの高さの計算方法が特殊になり、floatが指定された要素の高さも含めて反映してくれるようになります。
    • good
    • 0
この回答へのお礼

ありがとうございました。
できました!!!

お礼日時:2010/11/10 12:47

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング