ネガティブマージンで、固定幅のマルチカラムをレイアウトを実現する

coliss - ネガティブマージンの理解を深め、活用するテクニック集より。ネガティブマージンを使うことで、

- 画面サイズに合わせて伸縮するカラムと、
- 固定幅のカラム

から構成されるマルチカラムレイアウトを実現できるらしい。ということでサンプルを作って試してみました。

サイトの例をそのまま作ってもアレなので、3ペインにしています。
- 「コンテンツを表示する可変長のカラム」と「サイドバー1(200px)」「サイドバー2(200px)」から構成されます。
CSSを指定する上でのポイントは、以下の通りです。
- サイドバーカラムの横幅をwidthで固定、コンテンツカラムは「100%」とする。
- 各カラムを「float:left」に設定。
- コンテンツカラム(#main)の「margin-right」で「(固定幅にするサイドバーの width,margin,padding,border の合計値) * -1」を指定して、サイドバーをコンテンツカラムの上に重ねる。
- コンテンツカラムの子要素(#content)でmarginを指定して、サイドバーが重なっている部分にコンテンツを表示しないように抑制する。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">

      /** サイドバー */
      #sidebar1, #sidebar2 {
        width:200px;
        float:left;
        padding: 10px;
        margin-left: 10px;
      }
      #sidebar1 {border: 1px solid #dd6666;}
      #sidebar2 {border: 1px solid #66dd66;}

      /** コンテンツ部分 */
      #main {
        width:100%;
        float:left;
        /**
         * ネガティブマージンを使用してサイドバーを #main に重ねる。
         * 固定幅にするサイドバーの width,margin,padding,border の合計値を引くこと。
         */
        margin-right:-464px;
      }
      #content {
        border: 1px solid #6666dd;
        padding: 10px;

        /**
         * サイドバーが重なっている部分にコンテンツを表示しないように
         * marginを指定して押さえる。
         */
        margin-right:464px;
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="content">
        コンテンツ部分です。コンテンツ部分です。コンテンツ部分です。
        コンテンツ部分です。コンテンツ部分です。コンテンツ部分です。
        コンテンツ部分です。コンテンツ部分です。コンテンツ部分です。
        コンテンツ部分です。コンテンツ部分です。コンテンツ部分です。
      </div>
    </div>
    <div id="sidebar1">サイドバー</div>
    <div id="sidebar2">サイドバー2</div>
  </body>
</html>