シンプルな(X)HTMLのCSSレイアウトサンプル全15種

下記のシンプルなソースとCSSで実現可能なCSSレイアウトのサンプル全15種類を紹介します。固定幅の1カラム、2カラム、3カラムがあります。応用すれば可変幅もできます。

<body>
  <div id="header">
    <!-- ヘッダー -->
  </div>
  <div id="main">
    <!-- 主要情報 -->
  </div>
  <div id="navigation">
    <!-- ナビゲーション -->
  </div>
  <div id="complementary">
    <!-- 関連情報 -->
  </div>
  <div id="footer">
    <!-- フッター -->
  </div>
</body>

CSSソースはサンプルのHTMLファイル内に直接記述してあります。