float による段組で落ちてしまう場合

たまに見かけるのですが IE では整って表示されているのに Firefox では下に落ちてしまっている段組のレイアウト。これはほとんどが CSS の float プロパティでパーセントで数値を指定していることが原因だと思うのです。

IE では外側の border の外側を基準に計算しているのに対し、Firefox では border の内側を基準にしていると思われます。要するに、border の幅を計算に入れなきゃダメだということ。

IE と Firefox での見た目を揃えたいのならば、実際のパーセンテージよりも小さめの数値を指定して、ゆとりを持たせておいたほうがいいです。数値の合計が 100 % になってしまうと、Firefox ではさらに border の幅が加算され、100 % を超えて、画面の下に落ちてしまうことになります。

例えば 75:25 で分割したいなら float で左寄せにし、75:23 ぐらいにしておけば無難だと思います。右寄せであれば 73:25 ぐらいが適当でしょうか。