width 100% で縦に３段のレイアウト

解決済

質問者：yasu182
質問日時：2007/04/16 14:49
回答数：2件

上から 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-transitio …
<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">

</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>
</div>

<div id="bottom">bottom</div>

</body></html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： yambejp
回答日時：2007/04/16 15:24

floatしているので高さが決まらないのでは？

以下のようにして、floatをクリアしてあげてください

<div id="section02">
section02<br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="clear:both"></div>

- 0
- 件

通報する

No.2

回答者： grumpy_the_dwarf
回答日時：2007/04/16 15:28

section01とsection02の背景にmiddleとmiddle_insideが見えないっ

て話でしたら、見えない方が正解で、見えちゃうのはバグです。高
さが成り行きで中身が「middle_inside」の1語しかないので仕方が
ありません。floatしているブロックは計算に入れない規則。

高さを指定するとか、section02の後で<br clear="all" />すると
か、#middle_inside:after で見えないコンテンツを置くとか、でな
けりゃoverflow属性を指定するとか、いろんなごまかし方がありま
すので、好みのものをどうぞ。私は :afterで見えないスペースを置
くのが好きです。