CSSでレイアウトをする上で、よく悩まされるのが、IEとFireFoxの表示の違いです。

ということで、今回はBox内でオブジェクトをFloatさせた場合に、IE6等だとBoxからオブジェクトがはみ出してしまったり、高さがおかしくなったり、という現象の回避方法について覚書をしておきます。
大体は、Floatをclearさせれば、問題が解決したりします。

■ Box内で、高さの違う二つのオブジェクトを左右にFloatさせたりした場合。
上のように、二つのオブジェクトの高さが違ったりすると、FireFoxの場合は、高い方のオブジェクトにBoxが自動的に合わせてくれるのですが、IE6等は、二つの高さの中間ぐらいになってしまって、高い方のオブジェクトがはみ出してしまう事があります。

こんな場合は、Boxにwidthを指定してあげると、IEは安心するのか、きちんと高い方の高さに合わせてくれます。

ということで、CSSでのレイアウトで何かをFloatさせる時は、widthをなるべく指定してあげる。そうすると安心です。
(heightを指定してあげてもいいのですが、heightには、これまた表示の違いがあるので、そっとしておきましょう)

ちなみに、IE7に関しては未確認ですのであしからず