float と position: relative を使って 2 カラムレイアウト
導入
css では、position: absolute 神話が自分の中にあって、基本的にそれで戦えると思っている。
例えば、右端に 20px 余裕を持たせて残り全部の幅を持った要素を定義する場合などがこれにあたる。
ただ、position: absolute では戦えないケースも当然あって例えば、
-
- 高さが決まっていない要素を良い感じに配置する
なんて時には position: absolute が使えない。
上記のケースのありがちなものとして、2カラムレイアウトで、1カラム目の幅が決まっている場合などがあげられる。
今回は自分の備忘録として 2カラムレイアウト + 固定幅 + 残りの幅全部 を position: relative で倒す方法を書く。
本題
オーソドックスに html と css だけ書く。
<html> <body> <div id="wrapper"> <div id="column1"> <ul id="navigation"> <li class="item">item1</li> <li class="item">item2</li> <li class="item">item3</li> </ul> </div> <div id="column2"> <div id="content1"> content1 </div> <div id="content2"> content2 </div> </div> </div> </body> </html>
#wrapper { position: relative; width: 900px; } #column1 { width: 280px; float: left; } #column1:after { /* clearfix */ } #column2 { position: relative; right: 0; margin: 0 0 0 280px; } #column2:after { /* clearfix */ }
終わりに
今回は備忘録なので特に何もなし。
ポイントは固定値が 900px と 280px しかでてこないところ。
ナビゲーションの幅が変わっても考えることが少なくて済む。