2カラムレイアウト － メインスペースの枠を作る
ここからがいよいよCSSレイアウト最大のポイントとなります。メインスペースについて、幅をどのくらい取るか、左右どちらに寄せるかを決めたら、そのようにHTMLとCSSを記述していきます。下の例では横幅を470pxに固定し、右に配置した場合で説明します。
[HTMLの記述]
<div id="wrap"> <div class="header"> タイトルなど </div><!-- /header --> <div id="inner"> <div id="mainWrap"> メインスペース </div><!-- /mainWrap --> </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; }
#mainWrap { width:500px; float:left; }
[ブラウザ上の表示]
タイトルなど
メインスペース
「<div id="mainWrap">～</div>」の範囲がメインスペースとなります。CSSでは「width」で横幅を500pxに、「float」で左寄せ（left）を指定しています。この「float」こそがCSSレイアウトの鍵になります。