外枠・ヘッダー・フッター

HTMLの記述]

  1. <div id="wrap">  
  2.     <div id="header">  
  3.         タイトルなど   
  4.     </div><!-- /header -->  
  5.     <div id="inner">  
  6.         ここに左右の内枠を作ります。   
  7.     </div><!-- /inner -->  
  8.     <div id="footer">  
  9.         コピーライトなど   
  10.     </div><!-- /footer -->  
  11. </div><!-- /wrap -->  

[CSSの記述]

  1. body { text-align:center; }   
  2. #wrap { width:780px; text-align:left; margin:0 auto; }   
  3. #inner { margin:0 10px; }  

[ブラウザ上の表示]

タイトルなど
ここに左右の内枠を作ります。
コピーライトなど

（分かりやすくするため、高さ、色、枠線をつけています）

3カラムでも2カラム同様、左右の余白はしっかりとっておきましょう。

なお、上記ソースおよび表示例に「ここに左右の内枠を作ります。」とありますが、3カラムレイアウトの場合、2カラムを作った後でさらに2つの枠を作ることになります。ですので、この段階ではまだ2カラムレイアウトを作るイメージを持っておいてください。