2：1の枠を作る

まず左に寄せる枠から。ここには後でセンタースペースと左サイドバーが入ることになりますので、この2つの枠と中間の余白を足した幅を設定します。左160px、センター460px、余白10pxを合計すると、左に寄せる枠の幅は630pxになります。

右に寄せる枠は当初の予定通り120pxを指定します。

[HTMLの記述]

  1. <div id="wrap">  
  2.     <div id="header">  
  3.         タイトルなど   
  4.     </div><!-- /header -->    
  5.     <div id="inner">  
  6.         <div id="largeWrap">  
  7.             ここをさらに2段組に   
  8.         </div><!-- /largeWrap -->  
  9.         <div id="sideBetaWrap">  
  10.             右サイドバー   
  11.         </div><!-- /sideBetaWrap -->  
  12.         <div class="clear"><hr /></div>  
  13.     </div><!-- /inner -->  
  14.     <div id="footer">  
  15.         コピーライトなど   
  16.     </div><!-- /footer -->  
  17. </div><!-- /wrap -->  

[CSSの記述]

  1. body { text-align:center; }   
  2. #wrap { width:780px; text-align:left; margin:0 auto; }   
  3. #inner { margin:0 10px; }   
  4. #largeWrap { float:left; width:630px; }   
  5. #sideBetaWrap { float:right; width:120px; }   
  6. .clear { clear:both; }   
  7. .clear hr { display:none; }