2カラムレイアウト − ヘッダー・フッターの設置
左右に寄せる枠を作る前に、左右に寄せない部分＝ヘッダー・フッター部分を作成してしまいます。このページで言うと、ヘッダー部分とはタイトルとパンくずリンクが表示されている部分、フッター部分はコピーライト記載部分になります。
HTMLの記述
<div id="outline">
<div class="outline-marign">
ここに左右の内枠を作ります。
</div><!-- end outline-marign -->
</div><!-- end outline -->
<div id="outline">
<div class="header">
タイトルなど
</div><!-- end header -->
タイトルなど
</div><!-- end header -->
<div class="outline-marign">
ここに左右の内枠を作ります。
</div><!-- end outline-marign -->
<div class="footer">
コピーライトなど
</div><!-- end footer -->
コピーライトなど
</div><!-- end footer -->
</div><!-- end outline -->
ブラウザ上の表示
（分かりやすくするため、高さ、色、枠線をつけています）
（分かりやすくするため、高さ、色、枠線をつけています）
DIVタグは幅の指定をしない場合、記述した部分の範囲内（上の例では外枠750pxの範囲内）で100％表示されます。このような形で左右に寄せない部分は必ず出てくるものですので、左右の枠を作り始めてHTMLソースがゴチャゴチャしてくる前に、あらかじめ作っておきましょう。
なお上の例では、ヘッダー、フッターとも左右の余白を取らないよう、左右の余白を指定している「<div class="outline-marign">〜</div>」の外側にそれぞれを記述しました。ヘッダー、フッターの左右両端にもメイン部分同様に余白を設けたい場合は、それぞれを「<div class="outline-marign">〜</div>」の内側に記述してください。