いくつかの一般的な CSS レイアウト (要約)

<div class="header"></div>
<div class="content"></div>
<div class="フッター"></div>

。ヘッダ{
    マージン:0 自動; 
    最大幅: 960px;
    高さ:100px;
    背景色: 青;
}
。コンテンツ{
    マージン: 0 自動;
    最大幅: 960px;
    高さ: 400px;
    背景色: アクアマリン;
}
.フッター{
    マージン: 0 自動;
    最大幅: 960px;
    高さ: 100px;
    背景色: 水色;
}

<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>左</p>
    </div>
    <div class="right" style="background-color: lightgreen;">
        <p>正しい</p>
        <p>正しい</p>
    </div>        
</div>

。親 {
  オーバーフロー: 非表示;
  ズーム: 1;
}
。左 {
  フロート: 左;
  右マージン: 20px;
}
。右 {
  オーバーフロー: 非表示;
  ズーム: 1;
}

//HTML部分は上記と同じです。親{
  ディスプレイ:フレックス;
}  
。右 {
  左マージン:20px; 
  フレックス：1;
}

//HTML部分は上記と同じです。親{
  表示:グリッド;
  グリッドテンプレート列:自動 1fr;
  グリッドギャップ:20px
}

。容器 {
    padding-left: 220px; // 左列と右列にスペースを確保します padding-right: 220px;
  }
  。左 {
    フロート: 左;
    幅: 200ピクセル;
    高さ: 400px;
    背景: 赤;
    左マージン: -100%;
    位置: 相対的;
    左: -220px;
  }
  。中心 {
    フロート: 左;
    幅: 100%;
    高さ: 500px;
    背景: 黄色;
  }
  。右 {
    フロート: 左;
    幅: 200ピクセル;
    高さ: 400px;
    背景: 青;
    左マージン: -200px;
    位置: 相対的;
    右: -220px;
  }

 <記事クラス="コンテナ">
    <div class="center">
      <h2>聖杯レイアウト</h2>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </記事>

 。容器 {
        min-width: 600px; // 中央のコンテンツが左幅の 2 倍 + 右幅で表示できることを確認します}
    。左 {
        フロート: 左;
        幅: 200ピクセル;
        高さ: 400px;
        背景: 赤;
        左マージン: -100%;
    }
    。中心 {
        フロート: 左;
        幅: 100%;
        高さ: 500px;
        背景: 黄色;
    }
    .center .inner {
        margin: 0 200px; //新しく追加された部分}
    。右 {
        フロート: 左;
        幅: 200ピクセル;
        高さ: 400px;
        背景: 青;
        左マージン: -200px;
    }

   <記事クラス="コンテナ">
        <div class="center">
            <div class="inner">ダブルウィングレイアウト</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </記事>

   。中心、
      。左、
      。右 {
        パディング下部: 10000px;
        下マージン: -10000px;
      }
      。容器 {
        左パディング: 220px;
        右パディング: 220px;
        overflow: hidden; //オーバーフローの背景を切り取る} 

<div class="コンテナクリアフィックス">
    <div class="left"></div>
    <div class="content"></div>
    <div class="right"></div>
</div>

。容器 {
  背景: url("column.png") repeat-y;
  幅: 960ピクセル;
  マージン: 0 自動;
}
。左 {
  フロート: 左;
  幅: 220ピクセル;
}
。コンテンツ {
  フロート: 左;
  幅: 480ピクセル;
}
。右 {
  フロート: 左;
  幅: 220ピクセル;
}

 <div class="コンテナテーブル">
      <div class="コンテナ内部テーブル行">
        <div class="列 テーブルセル セル1">
          <div class="left aside">
            ....
          </div>
        </div>
        <div class="列 テーブルセル セル2">
          <div class="コンテンツセクション">
            ...
          </div>
        </div>
        <div class="列 テーブルセル セル3">
          <div class="右側">
            ...
          </div>
        </div>
      </div>
    </div>

。テーブル {
  幅: 自動;
  最小幅: 1000px;
  マージン: 0 自動;
  パディング: 0;
  表示: テーブル;
}
.tableRow {
  表示: テーブル行;
}
.tableCell {
  表示: テーブルセル;
  幅: 33%;
}
.セル1 {
  背景: #f00;
  高さ: 800ピクセル;
}
.セル2 {
  背景: #0f0;
}
.セル3 {
  背景: #00f;
}

#ラッパー{
  幅: 960ピクセル;
  マージン: 0 自動;
}
#メインコンテンツ{
  右境界線: 220px 実線 #dfdfdf;
  位置: 絶対;
  幅: 740ピクセル;
  高さ: 800ピクセル;  
  背景: 緑;
}
#サイドバー {
  背景: #dfdfdf;
  左マージン: 740px;
  位置: 絶対;
  高さ: 800ピクセル;
  幅: 220ピクセル;
}

 <div id="wrap">
      <div class="main">
        メイン<br />
        メイン<br />
        メイン<br />
      </div>
    </div>
    <div id="footer">フッ​​ター</div>

  * {
        マージン: 0;
        パディング: 0;
      }
      html,
      体 {
        height: 100%; //高さはレイヤーごとに継承されます}
      ＃包む {
        最小高さ: 100%;
        背景: ピンク;
        テキスト配置: 中央;
        オーバーフロー: 非表示;
      }
      #wrap .main {
        パディング下部: 50px;
      }
      #フッター{
        高さ: 50px;
        行の高さ: 50px;
        背景: 濃いピンク;
        テキスト配置: 中央;
        上マージン: -50px;
      }