- ベストアンサー
width 100% で縦に３段のレイアウト
上から top, middle, bottom の３つの段があって、 横に１００％伸びるものを作ろうとしてます。 middle の中には width=700 で center 寄せの middle_inside があり、 さらにその中に section1 と section2 があります。 ややこしくて申し訳ないのですが、以下のようなコードでして グレーと黄色の背景を うまく表示させる方法ありますでしょうか？ IE6 では希望通りに表示されるのですが Firefox 2.0 では背景が真っ白になってしまいます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>[ css ]</title> <style type="text/css"> <!-- * { margin: 0; padding: 0; font-family: "Times New Roman", Times, serif; font-size: 24px; } #top { height: 100px; margin: 0 auto; background: blue; } #middle { margin: 0 auto; background: yellow; } #middle_inside { width: 700px; margin: 0 auto; background: gray; } #bottom { height: 100px; margin: 0 auto; background: red; clear: both; } #section01 { float: left; background: green; width: 300px; } #section02 { float: left; background: brown; width: 300px; } --> </style> </head> <body> <div id="top">top</div> <div id="middle"> <div id="middle_inside"> middle_inside <div id="section01"> section01<br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="section02"> section02<br><br><br><br><br><br><br><br><br><br><br><br> </div> </div><!-- #middle_inside --> </div><!-- #middle --> <div id="bottom">bottom</div> </body></html>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
floatしているので高さが決まらないのでは？ 以下のようにして、floatをクリアしてあげてください <div id="section02"> section02<br><br><br><br><br><br><br><br><br><br><br><br> </div> <div style="clear:both"></div>
その他の回答 (1)
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
section01とsection02の背景にmiddleとmiddle_insideが見えないっ て話でしたら、見えない方が正解で、見えちゃうのはバグです。高 さが成り行きで中身が「middle_inside」の1語しかないので仕方が ありません。floatしているブロックは計算に入れない規則。 高さを指定するとか、section02の後で<br clear="all" />すると か、#middle_inside:after で見えないコンテンツを置くとか、でな けりゃoverflow属性を指定するとか、いろんなごまかし方がありま すので、好みのものをどうぞ。私は :afterで見えないスペースを置 くのが好きです。
