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 回答日時： 2008/07/14 11:17

えーと、他の回答でも散々書かれてるんですが・・・

ＣＳＳ使うなら先にFirefoxで確認してください。
ＩＥのレンダリングは凶悪なので信用してはだめです。
（実際今崩れてるくらいＣＳＳの解釈に差があるってことです）

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

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

この回答へのお礼

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

お礼日時：2008/07/19 18:26

No.2 回答者： DrFell 回答日時： 2008/07/15 08:02

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

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

この回答へのお礼

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

お礼日時：2008/07/19 18:27