[CSS]floatによるブラウザ間のズレの問題(1)

テーブルレイアウトからCSSでのレイアウトに切り替える時に最初に覚える要素「float」
今回はその時の注意点と検証と解決法を紹介します。

このカテゴリでは、CSSでのブラウザ間のズレの修正やありがちな間違い、
IE6対策などを紹介します。

テーブルレイアウトからCSSレイアウトへ

第１回は、最初につまづきやすいfloatを使ったレイアウトです。
テーブルレイアウトからいざフルCSSで記述してみたもののIEと他のブラウザの見え方が違う
ということで諦めてしまう方も少なからずいると思います。
私も最初にCSSを使ってコーディングをした時苦しんだものです。

では最初にテーブルレイアウトで、背景が灰色で横幅350pxのボックスの中に
50pxの間隔を空けて100pxのボックスを２つ配置します。
以下のようになります。

実際に表示すると以下のようになります。

floatを使う

それぞれのボックス名をcontainer,box1,box2にしてCSSで上記のレイアウトのように並べてみます。

プレビューは以下の通りです。今回はブラウザ毎に見てみます。

Firefox3

IE7

IE6

Opera

Google Chrome

IE6だけ表示が異なってしまいました。
結論からいいますと、これはIE6のバグになります。
floatを指定した方向と、marginを指定した方向が同じ方向の場合、
IE6のみ倍のmarginが適用されてしまいます。
ただし、そのmarginは親要素に対してのみです。

解決法は色々ありますが...

IE6だけ違うのですからIE6のみ適用するCSSを記述すればいい。
所謂CSSハックです。

最初に言っておきますとハックは出来る限り使わない方がいいです。
何故なら、これは苦肉の策であってその後のメンテナンス性も考えるととてもオススメできる方法ではありません。
それではmarginではなくpaddingを使うのはどうでしょうか。

これでも一応は解決します。このIE6のバグはmarginのみ発生するのでpaddingを使えば問題がありません。
しかし、box1でpaddingを使いたくなった場合、box1内にまた<div></div>を作る構造にしなくてはなりません。

最善の解決策

最初からこれだけ書けばよかった気もしますが、上記の方法では問題があることを言いたかったのです。
それでは解決方ですが、display: inline;を追加するだけになります。

本来<div>要素はブロックレベルですから、display: inline;を付加することによってインラインレベルになって しまうのではと思われるかもしれませんが、float属性が付いている時のみdisplay要素は無視される仕様になっています。
これで全く問題なく解決することが出来ます。