最新のInternet Explorer、Firefox、Opera、Google Chromeでご覧ください。
トップページ>3カラムレイアウト(中央リキッド)
3カラムレイアウ(中央リキッド)
HTML部分
<div id="header">
<p>ヘッダー</p>
</div>
<div id="left">
<p>左</p>
</div>
<div id="right">
<p>右</p>
</div>
<div id="center">
<p>センター</p>
</div>
<div id="footer">
<p>フッター</p>
</div>
CSS部分
* {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 200px;
background-color: #808080;
}
#container {
width: 100%;
}
#left {
width: 200px;
height: 400px;
background-color:#D8D8D8;
float: left;
}
#right {
width: 200px;
height: 400px;
float: right;
background-color:#D8D8D8;
}
#center {
height: 400px;
}
#footer {
clear: both;
width: 100%;
height: 150px;
background-color: #808080;
}
説明
ネガティブマージンとか使わずに、htmlでセンターをレフトとライトの後に記述したらできました。
高さ(height)は指定しない方が良いです。
JavaScript本格入門 |
独習PHP第2版 |
PHPライブラリコレクション |