CSSのレイアウトがFirefoxで崩れてしまう

質問

CSS初心者ですが教え下さい m(_"_)m

全体をCSSでレイアウトしているサイトを作成中です。
Blogのような3カラムで作成しております。

IEで表示すれば3カラムでレイアウトは崩れませんが・・・
Firefoxで表示するろ思いっきり崩れてしまいます （T_T)
1番右のボックスが右に表示さえれなく下に表示されてしまい、
フッダーが下ではなく、上にあがってきてしまいます。

サンプルページをアップしたので、IEとFirefoxを見比べて頂けると一目瞭然かと思います。
http://www.web.grrr.jp/bank/san/

CSSは3つで指定しています（テキストファイルでアップしてあります）
http://www.web.grrr.jp/bank/san/styles-color.txt
http://www.web.grrr.jp/bank/san/styles-site.txt
http://www.web.grrr.jp/bank/san/styles-width.txt

CSSハックは、あまり使いたくないので、CSSのタグを何とか修正して、
Firefoxでも綺麗に表示させたいのですが・・・
修正箇所等がわかる方がいらっしゃいましたら、教えて頂ければ幸いです。
どうぞ宜しくお願いします m(_"_)m

回答No.1

tenderfeel · ベストアンサー

えーと、他の回答でも散々書かれてるんですが・・・
ＣＳＳ使うなら先にFirefoxで確認してください。
ＩＥのレンダリングは凶悪なので信用してはだめです。
（実際今崩れてるくらいＣＳＳの解釈に差があるってことです）

崩れる原因ですが、
・footerにclearプロパティ入れる
・IEとFirefoxではボックスの計算方式が違う
・IEはfloatした要素の横方向marginを約2倍に広げるバグがある
以上気をつければ修正できると思います

あとhasLayoutっていうのを把握しておくとＩＥ対策しやすいと思います
http://coliss.com/articles/build-websites/operation/css/143.html

お礼

お礼が遅くなってしまってすみません。
細かく教えて頂きましてありがとうございました。

回答No.2

DrFell

floatを理解されていないことが原因ですね。

答えだけ言うと、
leftボックスとフッターのｃｓｓに
clear:both;
を入れてみてはいかが？

お礼

お礼が遅くなってしまい、すみません。
上記タグで修正ができました。
ありがとうございます。
まだ少しレイアウトが崩れている所があるので、自分なりに修正してみます。