3段組（メインコンテンツ・リキッド）レイアウトの作り方

このブログは３段組で、メインコンテンツの幅が可変のレイアウトになっています。
下記のサイトを参考にさせていただいて、このブログで用いているレイアウトの解説をしたいと思います。

参考サイト：CSS-EBLOG様

2008/6/8 追記
IE6標準モードでは表示がうまくいかない可能性があります。
詳細はこちらで。

１．ボックスを作ります。

3段組にしたいので、幅が可変のメインコンテンツボックスと、両端の幅固定メニューボックスを作ります。（全部で３つ）

メインコンテンツを入れるボックスです。

←左側のメニューになるボックスです。

右側のメニューになるボックスです。→

この状態だと、すべてのボックスがウィンドウサイズに応じて伸び縮みしますね。
ボックスに中身を入れていない場合、高さを指定しないとボックスの存在が分かりにくくなるので、height: 100pxを指定しています。
これは解説するために指定したものなので、本来は必要ありません。

---

２．メニュー用のボックスに幅を指定します。

ここでは例として幅200pxに指定しています。

メインコンテンツを入れるボックスです。

←左側のメニューになるボックスです。

右側のメニューになるボックスです。→

メニュー用のボックス（下二つ）は、幅が固定されています。ウィンドウサイズを変えても変化なし。

---

３．floatを使って、コンテンツを回り込ませます。

3つのボックス全てにfloat: left;を指定しました。

メインコンテンツを入れるボックスです。

←左側のメニューになるボックスです。

右側のメニューになるボックスです。→

 

clear: both;でfloatを解除するのもお忘れなく。
メインコンテンツ（ピンク色）が押しつぶされていますね。幅が固定になってしまいました。
floatプロパティを使う際は、一緒にwidth（幅）の値も指定しないと、動作がおかしくなってしまいます。
でも、幅を指定したらリキッドレイアウトは不可能になってしまいます。ああ、悲しきジレンマ。

ここであきらめてはいけません。次で解消法をご紹介します。

---

４．メインコンテンツを、新たなボックスで囲みます。

メインコンテンツを、divでさらに囲み、囲んだボックスに対して、幅100%ととfloatを指定します。
メインコンテンツのfloat:leftは消します。

メインコンテンツを入れるボックスです。

←左側のメニューになるボックスです。

右側のメニューになるボックスです。→

 

floatの意味がなくなってるじゃないか！幅100%にしたら、回り込んでくれないじゃないか！
そのとおりですね。分かってます。焦らず次に進みましょう。

---

５．メニューコンテンツにマージンを指定します。

これがいわゆる魔法のマージン。左メニューには、margin-left: -100%;を（この数値は固定です。）、
右メニューには margin-left: -200px;（これは、右側のメニューで指定した幅と同じ）を指定します。
マイナスで指定するマージンなので、ネガティブマージンと呼ばれることもあります。

メインコンテンツを入れるボックスです。

←左側のメニューになるボックスです。

右側のメニューになるボックスです。→

 

いかがでしょうか。3段組で表示されてますか？
「メインコンテンツを入れるボックスです」の文字が、左メニューのボックスの後ろに隠れています。最後にここを直しましょう。

---

６．メインコンテンツにマージンを指定します。

両側のメニューコンテンツと表示が重ならないよう、左右にメニューと同じ幅のマージンを取ります。

メインコンテンツを入れるボックスです。

←左側のメニューになるボックスです。

右側のメニューになるボックスです。→

 

いかがでしょうか。これで完成です！
唯一の欠点は、IE6の場合に両端のメニューの幅よりもウィンドウが小さくなるとレイアウトが致命的に崩壊することです。
最小幅、最大幅をcontentに指定しても良いかもしれませんね。

2008/6/8 追記
itochan様によりこの表現の間違い・語弊が発覚。
最小幅・最大幅は、この完成したリキッドレイアウト部分を新しいdiv要素で囲み、そこにCSSでmin-widhとmax-widthを指定してください。
IE6以下ではmin-widhとmax-widthに対応していませんので、minmax.jsというJavascriptを使います。これを使うと、最大幅・最小幅を指定することができます。（IE5,6確認済み）
ただし、IE6標準モードでは表示がうまくいかない可能性があります。
詳細はこちらで。

---

以上、3カラムリキッドレイアウトをお送りいたしました。