3カラムレイアウト − 3カラムに仕上げる
2カラムができたら、広い方の枠内にさらに2段の枠を作成します。幅は事前に決めてありますので、ここまでの作業を確認しながら、再度2カラムレイアウトを施してください。
HTMLの記述
<div id="outline">
<div class="header">
タイトルなど
</div><!-- end header -->
<div class="outline-marign">
<div class="center-left">
</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 -->
<div id="outline">
<div class="header">
タイトルなど
</div><!-- end header -->
<div class="outline-marign">
<div class="center-left">
<div class="main">
メインスペース
</div><!-- end main -->
<div class="left">
左サイド
</div><!-- end left -->
<div class="c-both"><br></div>
メインスペース
</div><!-- end main -->
<div class="left">
左サイド
</div><!-- end left -->
<div class="c-both"><br></div>
</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; }
.center-left { float:left; width:500px; }
.right { float:right; width:120px; }
.c-both { clear:both; }
ブラウザ上の表示
（分かりやすくするため、高さ、色、枠線をつけています）
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; }
.main { float:right; width:430px; }
.left { float:left; width:160px; }
.left { float:left; width:160px; }
ブラウザ上の表示
（分かりやすくするため、高さ、色、枠線をつけています）
以上で3カラムレイアウトは完成です。
「2度目の2カラム」を作成する際も回り込みの解除指定を忘れないよう、注意してください。