CSSのレイアウトテクニック - Faux Absolute Positioning
久々にCSSでの面白いテクニックですね。
Faux Absolute Positioningについて細かい説明は原文の解説にまかせるとして、かいつまんで説明すると、float方向のネガティブマージンとposition:relativeのleft(right):100%を利用して擬似的に自由配置するというもの。
これを利用するとfloatのみでは再現不可能だったレイアウトが可能になります。
例えば、メインカラムを先に記述して、後にサイド部分を記述するというマークアップの3カラムのリキッドレイアウト。
リキッドレイアウトの為、メインカラムを100%にして、サイド部分にfloatで入り込める領域を作成しなくてはいけないのですが、floatとマージンによる制御だけではたぶん無理。
順序さえ変えれば、左右のネガティブマージンで対応できるのですが。
また、position:absoluteを利用しても可能ですが、コンテンツ量が多くなればbottomが生成するクリアランス領域を超えて描画されてしまいます。
Faux Absolute Positioningを利用すればmargin-left:-100%;でサイドがfloatで入り込める領域を作成することが可能なのでサイドも自由にfloatで配置することが可能に。
div#contents{
width:100%;
float:left;
margin-left:-100%;
position:relative;
left:100%;
}
ただ残念なことにIE6の再描画バグに対応する為、各パーツをdivで包んでhaslayoutをtrueにしてやらなくていけない。
面白いテクニックですのでもう少し研究してみようと思います。
(勢いで書いたエントリーですので時間があるときにもう少し詳しい解説もしたいです)