最新のInternet Explorer、Firefox、Opera、Google Chromeでご覧ください。
htmlやCSSに関してあれこれ。
掲載している情報はご自由にお使いください。
トップページ>2カラムレイアウト(固定幅)
2カラムレイアウト(固定幅)
HTML部分
<div id="container">
<div id="header">
<p>ヘッダー800px</p>
</div>
<div id="left">
<p>メニュー200px</p>
</div>
<div id="right">
<p>テキスト600px</p>
</div>
<div id="footer">
<p>フッター800px</p>
</div>
</div>
CSS部分
* {
margin: 0;
padding: 0;
}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 800px;
height: 100px;
background-color: #A9A9A9;
}
#left {
width: 200px;
height: 300px;
float: left;
background-color: #C0C0C0;
}
#right {
width: 600px;
height: 300px;
float: left;
background-color: #DCDCDC;
}
#footer {
clear: both;
width: 800px;
height: 100px;
background-color: #A9A9A9;
}
説明
メニュー欄とテキスト欄をfloatするだけですね。
 【送料無料】プロとして恥ずかしくないWEBデザインの大原則新版 |
 【送料無料】HTMLとCSSで基礎から学ぶJavaScript |
 【送料無料】Webデザイン知らないと困る現場の新常識100 |
