はてな内の2カラムレイアウト
最近のリニューアルなどを経て、はてなのサイトは、2カラムでブラウザサイズに合せてメインカラムが可変するレイアウトが増えてるのですがキーワードページなどメインカラムの要素が様々だったり、カラムの上下左右と柔軟性が必要な場合が多く、色々やりくりした結果、floatを使った以下の方法で定着しています。
HTML
<div id="main"> <div class="box"></div> <div class="box"></div> </div> <div id="sidebar"> </div>
CSS
#main{
float:left;
width:100%;
}
#sidebar{
float:left;
width:250px;
background:#CCC;
margin-left:-260px;
}
.box{
margin-right:260px;
}こうすると、メインカラムに長いアルファベットが入ったり、巨大な画像が入った場合でも、多くのブラウザである程度レイアウトを保持できています。
positionを使った方が確実なのですが、floatなのは、position:absoluteでsidebarを配置するとキーワードページのように下にボックスを持ってこれないので使ってないです。（詳細は省きますが。）
ついでに以下の配慮も最近定着してましす。
可変するということはメインカラムの部分がサイズに合せて動きまくるわけで、それを考慮してデザインしておかないといけないです。もちろんアイデアにあがってる通りウインドウサイズを極端に縮めるとレイアウトが崩れます。そこで、これを回避する為にFirefoxなどでは
#container{
min-width:730px;
}のようにボックスの最小幅を指定する事で解決するのですが、IEではそうもいかず、以下のようにborderを使って無理やり対応しています。
HTML
<body> <div id="container"> <div id="body"> </div> </div> </body>
CSS
* html #container{
border-left: 730px solid #FFF;
}
* html #body{
margin-left: -730px;
position: relative;
background:#FFF;
}これでCSSでも最小ウインドウサイズを確保できます。
上でのIE用のCSSを使った時の注意しないといけないのは、#bodyのバックグラウンドにかならず背景色を指定しておかないとIEのオプション設定で「指定された色を使用しない」にチェックすると、デフォルトではborderは全て黒、文字色も全て黒として認識しまうようです。（idea:9068）そこで、上で書いたborderより上のボックスの背景色に白を指定しborderの色を隠さないと、情報が読めなくなってしまいます。ただし、そうすると#containerには背景色は使えないという事になってしまうので最初にその辺を考慮して組む必要があります。
機会があれば試してください。他にも柔軟な2カラムはあればと思って調べ中です。
