2カラムレイアウト − メインスペースの枠を作る
ここからがいよいよCSSレイアウト最大のポイントとなります。メインスペースについて、幅をどのくらい取るか、左右どちらに寄せるかを決めたら、そのようにHTMLとCSSを記述していきます。下の例では横幅を470pxに固定し、右に配置した場合で説明します。
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="main">
メインスペース
</div><!-- end main -->
メインスペース
</div><!-- end main -->
</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; }
.main { width:470px; float:right; }
ブラウザ上の表示
（分かりやすくするため、高さ、色、枠線をつけています）
「<div class="main">〜</div>」の範囲がメインスペースとなります。CSSでは「width:470px;」で横幅を470pxに、「float:right;」で右寄せを指定しています。この「float」こそがCSSレイアウトの鍵になります。