CSSで3カラムのレイアウト

CSSで2カラムの段組をする場合はfloatを使って左右に振るだけで良かったのですが、3カラムの場合は少し工夫が必要です。


いくつか方法はあると思いますが、一般的で確実なのは、
一旦2カラムにブロック分けし、大きい方のブロックの中に2つのブロックを作り左右に振り分ける方法です。
HTMLの例)
<body>
<div id="wrap">
<div id="head">【ヘッダー】</div>
<div id="main">
<div id="content">【コンテンツ】</div>
<div id="side_left">【左サイド】</div>
</div>

<div id="side_right">【右サイド】</div>
<div id="foot">【フッター】</div>
</div>
</body>
CSSの例)
#wrap{ width:780px; }
#head{ width:778px; }
#main{ width:650px; float:left; }
#content{ width:520px; float:right;}
#side_left{ width:125px; float:left; }
#side_right{ width:125px; float:right; }
#foot{ width:778px; clear:both;}
3カラムのサンプル
要はDIVタグを入れ子にすれば良いわけで、レイアウトをブロックで見る習慣がつけばかなり複雑なレイアウトも可能になります。