* 2カラムレイアウト(メインリキッド+サイド固定幅) [#i78bc420]

*** html [#kb1e9e94]
 <html>
 <body>
   <div id="side"></div>
   <div id="main-container">
     <div id="main"></div>
   </div>
 </body>
 </html>

*** css [#jc08e1f6]
 #side { 
   float: left;
   width: 200px;
 }
 #main-container {
   float: left;
   width: 100%;
   margin-left: -200px;
 }
 #main {
   margin-left: 200px;
 }

*** 解説 [#febb7534]
- #sideと#main(#main-container)の2カラム構成にする。
- #sideと#main-containerを共にfloat:leftする。
- #sideは固定幅200pxにする。
- #main-containerはリキッドにする為にwidth:100%にする。
- が、このままでは#main-containerは下に落ちるので、magin-left:-200pxとネガティブマージンを指定して左マージンを空ける。
- さらに#main-container内の#mainにmargin:left200pxを指定して、左マージンを元に戻す。
- #main内にメインコンテンツを記述する。



トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS