CSSによる最小限の3カラム・レイアウト

position:relativeなコンテナに対してposition:absoluteで左右カラムを固定。真中のカラムの水平アライメントはmarginで押え、垂直はコンテナのpaddingで合わせる。(と解釈している)

左右カラム (sidebar)

水平： absolute; left: right:
垂直： absolute; top:

真中カラム (center)

水平： sidebarの幅に合わせた左右marginで固定。 magin-left: margin-right:
垂直：コンテナのpadding-top：をsidebarのtop:に合わせる。

TDL表記だと



html

 head

  style type="text/css"

   ^div { border: 1px solid #ccc }

   ^.sidebar { top: 10px; width: 180px; }

 body

  div id="container"	          style="position:relative; padding-top: 10px;"

   div id="center"		   style="margin: 0 200 0 200;"

    ^Center

   div id="left" class="sidebar"   style="position:absolute; left:10px"

    ^Left

   div id="left" class="sidebar"   style="position:absolute; right:10px"

    ^Right

HTML (ここに貼り付けるとうまく見えない… ソースみてください)

Center

備考

世に出回っている「完璧3カラムレイアウト」 http://matthewjamestaylor.com/blog/perfect-3-column.htm の仕組がこれじゃないかなと思う。これは例としてはあまりにも大きすぎて分からない… これに基いている例を分解して最小限度にしたら上記のようなものになった。

左右をabsoluteで固定しているので、ソースの中では真中カラムが左右の先に来てもいい。メインのコンテントが上にくるので、SEOや「普通でない」user-agentに親切だ。

CSSレイアウト==FAIL

しかし、3カラムレイアウトを組むという簡単なことをするのにこれだけの努力が要るってのはCSSはFAILだな。過去にはもっと簡単レイアウトのやりかたが色々あったと思う。HTMLのテーブルですら簡単に理解できるコンセプトだった。
CSS派の言い分には理論的に共感する部分があるが、やはり対象とするユーザベースが簡単に1から組めるものでなければ、そのコンセプトは失敗という他ない。ウェブデザイナーや開発者に会う度に「3カラムレイアウトってどう作る？」と聞きくことにしている。返ってくる答は：既存のものを変更していく。dreamweaverでパターンを選ぶ。その分野のプロが殆どその原理を理解していないのが現実のようだ。

ウェブはそのインフラがテキストベースで簡単で誰でもハックできるっことによって成功した。HTMLのレイアウトはその例外のようだ。

もう二度と簡単なレイアウトするのにこんな時間をかけたくない。こんどCSSで行き詰まったらTABLEを使ってやる。