3カラムレイアウト − 2：1の枠を作る
事前に決めた幅に従い、まずは2カラムレイアウトを作ります。ここではセンター・左・右の順にHTMLを記載する例に従い説明します。
まず左に寄せる枠から。ここには後でセンタースペースと左サイドバーが入ることになりますので、この2つの枠と中間の余白を足した幅を設定します。左160px、センター430px、余白10pxを合計すると、左に寄せる枠の幅は500pxになります。
右に寄せる枠は当初の予定通り120pxを指定します。
HTMLの記述
<div id="outline">
<div class="header">
タイトルなど
</div><!-- end header -->
<div class="outline-marign">
</div><!-- end outline-marign -->
<div class="footer">
コピーライトなど
</div><!-- end footer -->
</div><!-- end outline -->
<div id="outline">
<div class="header">
タイトルなど
</div><!-- end header -->
<div class="outline-marign">
<div class="center-left">
ここをさらに2段組に
</div><!-- end main -->
<div class="right">
右サイド
</div><!-- end right -->
<div class="c-both"><br></div>
ここをさらに2段組に
</div><!-- end main -->
<div class="right">
右サイド
</div><!-- end right -->
<div class="c-both"><br></div>
</div><!-- end outline-marign -->
<div class="footer">
コピーライトなど
</div><!-- end footer -->
</div><!-- end outline -->
CSSの記述
body { text-align:center; }
#outline {
width:750px;
text-align:left;
margin:0 auto;
}
.outline-margin { margin:0 10px; }
ブラウザ上の表示
（分かりやすくするため、高さ、色、枠線をつけています）
body { text-align:center; }
#outline {
width:750px;
text-align:left;
margin:0 auto;
}
.outline-margin { margin:0 10px; }
.center-left { float:left; width:500px; }
.right { float:right; width:120px; }
.c-both { clear:both; }
.right { float:right; width:120px; }
.c-both { clear:both; }
ブラウザ上の表示
（分かりやすくするため、高さ、色、枠線をつけています）
ついつい忘れがちになる回り込みの解除指定ですが、崩れの原因となりますので必ず設置しましょう。