3カラムレイアウト － 3カラムに仕上げる
2カラムができたら、広い方の枠内にさらに2段の枠を作成します。幅は事前に決めてありますので、ここまでの作業を確認しながら、再度2カラムレイアウトを施してください。
[HTMLの記述]
<div id="wrap"> <div id="header"> タイトルなど </div><!-- /header --> <div id="inner"> <div id="largeWrap"> <div id="mainWrap"> メインスペース </div><!-- /mainWrap --> <div class="sideAlphaWrap"> 左サイドバー </div><!-- /sideAlphaWrap --> <div class="clear"><hr /></div> </div><!-- /largeWrap --> <div class="sideBetaWrap"> 右サイドバー </div><!-- /sideBetaWrap --> <div class="clear"><hr /></div> </div><!-- /inner --> <div class="footer"> コピーライトなど </div><!-- /footer --> </div><!-- /wrap -->
[CSSの記述]
body { text-align:center; }
#wrap { width:780px; text-align:left; margin:0 auto; }
#inner { margin:0 10px; }
#largeWrap { float:left; width:630px; }
#mainWrap { float:right; width:460px; }
#sideAlphaWrap { float:left; width:160px; }
#sideBetaWrap { float:right; width:120px; }
.clear { clear:both; }
.clear hr { display:none; }
[ブラウザ上の表示]
タイトルなど
メインスペース
左サイドバー
右サイドバー
以上で3カラムレイアウトは完成です。
「2度目の2カラム」を作成する際も回り込みの解除指定を忘れないよう、注意してください。
ここで使用しているCSSプロパティ
- 前の記事：3カラムレイアウト － 2：1の枠を作る
- 次の記事：4カラムレイアウトへの応用