CSSでマルチカラム

マルチカラム（段組み）レイアウトのサンプルを2つ紹介します。

1.floatで段組み

ボックスをfloatで左右に振り分ける。
注意点としては、clearfixを使うか、もしくはfloatの親要素にoverflowを入れるかしないと親の高さが算出できなません。
なお、float直後の要素でclearをした場合は、後に続く要素に問題は出ませんが、親要素の高さが算出されないため、背景色や背景画像を設定していると表示されません。

HTML

<header><h2>ヘッダー</h2></header>
<div class="parentBox clearfix">
<div class="main1">
<h1>メインコンテンツ</h1>
<p>width:390px</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<!-- /.main --></div>
<div class="sub1">
<h2>サブメニュー</h2>
<p>width:190px</p>
<ul>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
</ul>
<!-- /.sub --></div>
<!-- /.parentBox --></div>
<footer class="clear"><h2>フッター</h2></footer>

<p>clearfix等を設定しなかった場合のサンプル。<br>
高さが算出されないため、親ボックスの背景色が見えない。</p>
<header><h2>ヘッダー</h2></header>
<div class="parentBox">
<div class="main1">
<h1>メインコンテンツ</h1>
<p>width:390px</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<!-- /.main --></div>
<div class="sub1">
<h2>サブメニュー</h2>
<p>width:190px</p>
<ul>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
</ul>
<!-- /.sub --></div>
<!-- /.parentBox --></div>
<footer><h2>フッター</h2></footer>

CSS

body {
  width: 600px;
}
header {
  background: #fee;
}
footer {
  background: #efe;
}
.parentBox {
  background: #ccc;
}
.main1 {
  float: right;
  width: 390px;
  margin-bottom: 20px;
  background: #fef;
}
.sub1 {
  float: left;
  width: 190px;
  background: #eef;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

表示サンプル

サンプルhtml

マルチカラムのサンプル1

2.display:table（table-cell）を使う

display:tableとdisplay:table-cellを使っての段組み。※IE7以下は未対応。

tableが行でtable-cellがセルになる感じです。
IE7以下を切り捨てても良い場合は、floatを使うよりも格段に使いやすい。というより段組みにfloatは必要ないんじゃないかと思うくらい便利です。
テーブルレイアウトとほぼ同様の事ができるので、複雑な表現も可能（と思います）。
また、幅の値を％で指定する事でリキッドレイアウトにも対応できます。

これまでdisplayプロパティは、IE6〜7のおかげでblockかinlineくらいしか使う機会がありませんでしたが、2014年4月にXPのサポートが終了したことで、ようやくその本領を発揮できるようになったのではないかと思う今日この頃です。

注意点としては、幅の指定もしくはtable-layout:fixedを指定しないとセルの幅が自動で算出されてしまうので必ず指定することと、テーブルなのでセルの間隔をマージンで調整する事はできない、ということ。
それから、table-cellにはvertical-alignの指定も忘れないように。

HTML

<header><h2>ヘッダー</h2></header>
<div class="parentBox2">
<div class="main2">
<h1>メインコンテンツ</h1>
<p>width:60%</p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
<!-- /.main2 --></div>
<div class="sub2">
<h2>サブメニュー</h2>
<p>width:40%</p>
<ul>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
<li>ダミーテキスト</li>
</ul>
<!-- /.sub2 --></div>
<!-- /.parentBox2 --></div>
<footer><h2>フッター</h2></footer>

CSS

.parentBox2 {
  display: table;
  table-layout: fixed;
  background: #ccc;
}
.main2 {
  display: table-cell;
  width: 60%;
  background: #fef;
  vertical-align: top;
}
.sub2 {
  display: table-cell;
  width: 40%;
  background: #efe;
  vertical-align: top;
}