3カラムレイアウトで、中央を可変にする（リキッドレイアウト）

▼EntryMore▼

さて、とある記事でこれを見つけて、かなりびっくりさせられました。
まず簡単に言ってしまうと、marginのマイナス値を、幅以上に設定すると、
floatしたボックスはなぜかHTML上で上に書かれているボックスに重なります。
メインのCSSはこんな感じです。

ポイントは、真ん中の部分を
#wrapperと#contentsのふたつで囲み、
#wrapperにのみfloatを設定しているところです。

イメージで言うと、まず3行の文章を想像してください。
普通に考えれば、書かれた順に上から文章が3行になりますよね？
これがCSSを指定する前のhtmlだと思ってください。
そして、1行目が中央部分、2行目が左、3行目が右の要素となります。
さて、普通のワープロなどでは現在編集中の箇所を示すカーソルが点滅してますよね？
それを、2行目の先頭に持ってきてください。どうなりますか？
当然、2行目の先頭でカーソルが点滅しますよね。
さて、その状態で左ボタンを押してみてください。カーソルはどうなりますか？
1行目の一番後ろに移動しますよね？
これがmarginのマイナス値のイメージです。
ただ、マイナス値が幅以下の場合はただ左にずれるだけになります。
しかし、これを幅以上に設定すると、なぜか左にずれていたものが消え、
上のボックス（上の説明では1行目の文章の一番後ろ）に出現します。
ソースで言うと

てな感じです。
でもこの場所に出現されても左側になっていないので困りますね。
では一番左側にきてもらいましょう。

これで無事、一番左に表示されました。
ただ、これだと真ん中のボックスに書かれている内容にかぶさってしまうので
真ん中の要素のmarginを左右200pxに設定して回避しましょう。
（右も設定するのは、このあとの右側のボックス分の余白も取るためです）

これで左部分と真ん中の部分がうまく表示されました。
次に右側の部分です。
この状態でブラウザで表示させると右側にしたい部分が上のボックスのすぐ下の
左側によっていると思います。
これは左部分と右部分にfloat:leftを設定していて、かつ左側のボックスが上に逃げちゃってるので右側のボックスが左に詰まった（floatした）状態になっているためです。
この右側のボックスも上に持っていきたいですよね。
これも、結局左側のボックスと同じ原理です。
さっき上で左側のボックスが右側にきて困った、と書きましたよね？
これをそのまま右側のボックスに設定すれば、今度はしっかり右側に表示されることになっちゃいます。

これで完成です。

真ん中のボックス部分は普通に背景やボーダーを設定できます。
ただ、ここで注意があります。
WnIEの場合、幅の認識が違うため、margin-left: -100%としてもうまく動きません。
（一番外側のボックスが100%なら問題ありませんが）
これは、親ボックスを基準にした100%ではなく、bodyを基準にしたサイズになるからと
思われます。
なので、一番外側のdiv要素の幅（サンプルでは80%）に合わせて指定します。

最終的な形は上のようになります。
「_margin-left」はアンダースコアハックと呼ばれるハックです。
（ハックについては現在作成中なのでしばしお待ちを）
以上が、3カラムで真ん中の要素を可変にする方法です。

ちなみに参考にしたサイトはlayout galaです。（英語ですが…）