header
c-col
- OK – Mac Firefox 1.5
- OK – Mac Safari 2.0.3
- OK – Mac Opera 8.01
- OK – Win Firefox 1.5
- OK – Win Internet Explorer 6.0
- OK – Win Netscape 7.2
l-col
r-col
実際の動作サンプル
3カラム可変幅のレイアウト ———————————————————————-
それから、3カラム可変幅のレイアウトもやってみたのだけれど、サイドバーの背景色を一番下まで伸ばすのはどうやるんだろう? 固定幅なら、BODY に背景画像を指定するんだが。
サンプルコード
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>CSS Layout</title>
<style type="text/css">
<!--
body {
padding:0;
margin:0;
}
#frame {
width:100%;
}
#header {
color: #CCCCCC;
background-color: #000000;
border-bottom: 1px solid #999999;
}
#wrap {
float:left;
width:70%;
}
#c-col {
float:right;
width: 70%;
color: #CCCCCC;
font-size: 12px;
background-color: #444444;
}
#l-col {
float:left;
width:30%;
background-color: #222222;
}
#r-col {
float:left;
width: 30%;
background-color: #222222;
}
#footer {
clear:left;
color: #CCCCCC;
background-color: #000000;
border-top: 1px solid #999999;
}
#c-col-inn { margin: 15px; }
#l-col-inn { margin: 15px; }
#r-col-inn { margin: 15px; }
-->
</style>
</head>
<body>
<div id="frame">
<div id="header">header</div>
<div id="wrap">
<div id="c-col"><div id="c-col-inn">
<p>c-col</p>
<ul>
<li>OK – Mac Firefox 1.5</li>
<li>OK – Mac Safari 2.0.3</li>
<li>OK – Mac Opera 8.01</li>
<li>OK – Win Firefox 1.5</li>
<li>OK – Win Internet Explorer 6.0</li>
<li>OK – Win Netscape 7.2</li>
</ul>
</div></div><!-- /c-col -->
<div id="l-col"><div id="l-col-inn">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div></div>
</div>
<div id="r-col"><div id="r-col-inn">r-col</div></div>
<br style="clear:both;">
<div id="footer">footer</div>
</div>
</body>