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>
