IE6におけるフロートドロップを回避する方法

IE6で悩まされる問題のひとつにCSSを使ったカラムの指定がうまくいかない、というものがある。これはフロートドロップと呼ばれるもののひとつ。マルチカラムのレイアウトを指定した場合、あらかじめ確保された幅よりもその中に配置される要素の幅のほうが大きい場合、その要素は次の行へ改行していくことになる。これは仕様で定められた動作で、どの最新ブラウザも同じレンダリングを実施する。

ただし、IE6はここで想定とは違った動きを見せる。IE6ではwidthプロパティのサポートが完全ではなく、コンテンツに応じてその長さが変化する仕組みになっている。つまり、CSS widthプロパティを使ってマルチカラムを設定したつもりになっていても、その要素の中に入っているほかの要素の幅に影響を受けて、マルチカラムとして機能せず、次の行に改行してしまう、というレンダリングになってしまうことがある。

この問題を回避するシンプルな方法がCSS Quick Tip: How to prevent a "float drop" in IE6 - YUIBlogで紹介されている。紹介されているのは改行してしまう右カラムをその場にとどまらせるために、次のようにmargin-rightにマイナス値を指定しつつ、positionにrelativeを指定するというもの。この方法であれば右カラムは改行することなく、その場にとどまり続けることになる。しかもIE6以外の主要ブラウザでもそのまま利用できるという利点がある。

margin-right: -100px;
position: relative;

ほかの手段で同様のレンダリングを実施する方法もあるが、この方法であればHTMLそのものに対する変更を加える必要がなく、CSSのみで対処しやすいという利点がある。CSS Quick Tip: How to prevent a "float drop" in IE6で説明されているが、この方法はカラムの場所はキープするものの、その幅は広がったままになっているので、背景色を指定したりボーダーを指定したりすると、広がった幅のままでレンダリングされてしまうため注意が必要。