3カラムレイアウト － 2：1の枠を作る
事前に決めた幅に従い、まずは2カラムレイアウトを作ります。ここではセンター・左・右の順にHTMLを記載する場合を説明します。
まず左に寄せる枠から。ここには後でセンタースペースと左サイドバーが入ることになりますので、この2つの枠と中間の余白を足した幅を設定します。左160px、センター460px、余白10pxを合計すると、左に寄せる枠の幅は630pxになります。
右に寄せる枠は当初の予定通り120pxを指定します。
[HTMLの記述]
<div id="wrap"> <div id="header"> タイトルなど </div><!-- /header --> <div id="inner"> <div id="largeWrap"> ここをさらに2段組に </div><!-- /largeWrap --> <div id="sideBetaWrap"> 右サイドバー </div><!-- /sideBetaWrap --> <div class="clear"><hr /></div> </div><!-- /inner --> <div id="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; }
#sideBetaWrap { float:right; width:120px; }
.clear { clear:both; }
.clear hr { display:none; }
[ブラウザ上の表示]
タイトルなど
ここをさらに2段組に
右サイドバー
ついつい忘れがちになるclearによる回り込みの解除指定ですが、崩れの原因となりますので必ず設置しましょう。