CSSを使った二段組もどき

body部分

このような段組は従来はtableタグで作られてきました。 tableタグを使うことに本質的な問題があるわけではありませんが，ここではCSSを使って段組をしてみましょう。 ここで紹介する方法はシンプルで，ブラウザの幅に合わせて伸び縮みします（横方向に伸縮可能なレイアウトをflow layoutあるいはliquid layoutと呼びます）。 Netscape Communicator 4.xでもちゃんと表示できます。

方法はいたって簡単です。 まずbody部分を次のようにマークアップします。

<body>
  <h1>タイトル</h1>
  <div id="main">
    本文
  </div>
  <div id="sidebar">
    サイドバー
  </div>
  <div id="footer">
    フッタ
  </div>
</body>

これだけです。 CSS部分については右のサイドバーをご覧ください。