overflowプロパティで防ぐ
floatプロパティを使ったマルチカラムレイアウトは、意図したとおりに各カラムが配列できず、一部が下に落ちてしまう「カラム落ち」の問題があります。例えばIE6では、横並びの各カラムにその横幅を超えるサイズの画像を入れると、それに合わせてカラムの横幅が広がり、カラム落ちが発生してしまいます。この場合、各カラムに「overflow:hidden;」を指定するとカラムの横幅より大きな部分は表示せず、自動的に横幅が広がることもありません。
カラム落ちはしない】
クライアントが更新するブログなど手違いで大きなサイズの画像が使われる可能性があるページに有効です。また、IE5.5以前およびIE6の過去互換モードではwidthプロパティの解釈にも注意が必要です。ボックスモデルの正しい解釈は、widthプロパティに指定した値がコンテント領域の横幅となり、これにpadding,borderの値を足したのもが要素の横幅となります。しかし、過去互換モードではwidthの値にpadding,borderを含み、本来より小さく横幅が計算されるため、IEに合わせてマルチカラムを組むとほかのブラウザでカラム落ちが発生してしまいます。この場合、フロートさせる各要素にはpadding,borderを一切指定せずにレイアウトを行い、その内包要素でpaddingやborderを調整するなどの工夫が必要となります。
padding: 0;
border: none;
width: 300px;
Second element
padding: 10;
border: 2px;
width: 300px;
★標準モードにおけるボックスモデルの解釈
padding: 0;
border: none;
width: 300px;
Second element
padding: 10;
border: 2px;
width: 300px;
★IE5.5以前およびIE6の過去互換モードではボックスモデルの解釈が大きく異なる