2段カラムの作り方（float編）
基本的な2段カラムのテンプレートの作り方を紹介します。ヘッダー、コンテンツ（2段カラム）、フッターからなるテンプレートです。
(X)HTMLコード
<div id="top">
<div id="header">header</div>
<div id="contents">
<div id="mainContents">mainContents</div>
<div id="subContents">subContents</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>CSSコード
body {
margin:0;
}
div#top {
width:750px;
margin:0 auto;
}
div#contents {
float:left;
width:750px;
}
div#mainContents {
float:left;
width:600px;
}
div#subContents {
float:right;
width:150px;
}
div#footer {
clear:both;
}HTML、CSSは最低限必要なソースコードです。レイアウトを体裁したい場合は、paddingなどの指定も必要となります。
まずHTMLソースコードですが、テンプレート全体を囲んだほうがデザインに幅が出ます。ここでは<div id=#top"></div>になります。なぜid名がtopなのかというと、ページのトップの戻りリンク先にも併用できるためです。別の名前でももちろん構いません。
2段カラム部分も囲みます。<div id="contents"></div>の部分です。これも先ほどと同様デザインに幅が出るためです。例えば、2段カラムの縦の長さが違っても、カラムの一番下まで背景画像を繰り返し表示できます。
続いて、CSSソースコードを説明します。2段カラム部分（<div id="mainContents"></div>と<div id="subContents"></div>）はfloatにより横並びにします。
また、2段カラムを囲んでいるcontetnsにもfleatを指定します。これによりcontetns領域が2段カラムをちゃんと囲めるようになり、カラムの一番下まで背景画像を繰り返し表示することなどが可能になります。これはCSSの仕様により、フロートボックスの親要素（この場合はdiv#contetns）は子要素の中身がないと計算されてしまうので、div#contetns自身にもfloatを適用することにより子要素の中身が計算されるようになります。
そしてdiv#footerで「clear:both;」を指定して回り込み（というか浮いている状態）を解除します。
注意点ですが、floatを指定した要素には必ずwidthにauto以外の値を指定しなければ内容が0になってしまいます。
Visual formatting model details
CSS2.1の仕様では、内容に合わせて縮めた値になります。
Visual formatting model details
10.3.5 Floating, non-replaced elements
If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width.
