2カラムレイアウト − サイドバーの枠を作る
メインスペース枠の作成と同様に、サイドバーの枠を作成します。
こちらも枠の幅を決めるわけですが、この際、メインスペースとサイドバーの幅の合計値が外枠の幅を超えないように注意してください。また、寄せる方向はメインスペースとは逆の方向になります。下の例ではサイドバーを左250pxで指定した場合について説明します。
HTMLの記述
<div id="outline">
<div class="header">
タイトルなど
</div><!-- end header -->
<div class="outline-marign">
<div class="main">
メインスペース
</div><!-- end main -->
</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 class="side">
サイド
</div><!-- end side -->
サイド
</div><!-- end side -->
</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; }
.main { width:450px; float:right; }
ブラウザ上の表示
（分かりやすくするため、高さ、色、枠線をつけています）
body { text-align:center; }
#outline {
width:750px;
text-align:left;
margin:0 auto;
}
.outline-margin { margin:0 10px; }
.main { width:450px; float:right; }
.side { width:250px; float:left; }
ブラウザ上の表示
（分かりやすくするため、高さ、色、枠線をつけています）
メインスペースの幅、サイドバーの幅、左右の余白を全て合計すると740pxとなり、外枠の幅750pxに10px足りない状態になりますが、この10pxはメインとサイドの間の余白となります。
ウェブデザインをする上で、余白はとても重要で、左右中間の余白を揃えることでサイトがキレイに整理されて見えます。この余白を確保するため、「メイン＋サイド＋左右余白＋中間余白＝外枠の幅」となるよう、それぞれの幅を決めていきましょう。
例：外枠700px＝メイン510px＋サイド160px＋左右中間余白計30px
例：外枠750px＝メイン440px＋サイド250px＋左右中間余白計60px などなど