floatした部分のborderが消えるIEのバグ

私、スタイルシートに関してはちょっとだけ自信を持ってるんですが、それでも毎度毎度FirefoxとIEとの表示のされ方の違いに悩まされます。

昨日はある方からの依頼を受け、HTML＆CSSのコーディング作業を行っていたわけですが、「floatさせた部分だけ両サイドのborderが消えちゃうIEのバグ」にぶちあたり、その解決だけで数時間費やしてしまいましたorz

無駄に時間を使わされて悔しいので、その解決方法をアップしておこうと思います。

例えば、

CSSでこんな感じのレイアウトを組んだとします。そのときCSSはと言いますと、

body { text-align:center; }
#container { margin:0 auto; text-align:left; }
#left { width:**px; float:left; }
#right { width:***px; float:right; }

ってな感じ。これでレイアウトはばっちりなんですが、外側の#containerの左右にborderを指定した場合、こんな感じで表示されちゃうんです。。。

floatで左右に寄せた部分のborderがスッポリ消えちゃうんですよ。なんちゅーバグじゃ...。Firefoxならちゃんとしっかり表示されるのに...。だからIEはイヤなのさ。

これが自分のサイトならborderを画像で作ってbackgroundで表示させるとか、border自体のないデザインを考えるとかで回避できるんですが、今回は人から依頼された案件、無駄な画像は使いたくないですし、そもそもIEで表示されないのは困ります。

で、あれこれ調べてみた結果、スタイルシートを次のようにすることで回避できることが分かりました。

body { text-align:center; }
#container { width:***px; margin:0 auto; text-align:left; }
#left { width:***px; float:left; }
#right { width:***px; float:right; }

赤字で示したとおり、floatさせるボックスの親ボックス（上の例で言えば#container）の幅（width）を指定してあげると、さっきまで消えてたborderがアラ不思議。ちゃんと表示されました＾＾.....（この解決策が見つかるまで費やした時間の長かったこと長かったこと...orz）

サイト全体のレイアウトの場合、親ボックスとなる大外枠は大抵幅を指定してることと思いますんで、このようなバグに遭遇することも滅多になさげですが、サイト内の何気ない部分だけさらに2段に分ける場合など、その外枠には幅を指定しないことも多い（divタグは幅を指定しなければ自動的に100％になるから）と思われ、そんなときにこのバグに悩まされることになります。

「floatを使う場合、その外枠にはwidthを指定」

コレ、覚えておきましょう＾＾