CSSでページ作成、Firefoxでうまく表示できません

floatされた子要素の高さを親要素が認識しないのは、正しい表示のされ方です。 floatされた要素の高さを含めてしまうIEの方がバグなので、この場合Firefoxが正解です。

中身がfloatされているので、浮遊状態となり高さを取得できないのでしょう #container に overflow:auto; または overflow:hidden; を追加するか、#container自体をfloatさせてしまえば、無駄なタグを付け加えずに解決するかと思います

Firefoxでの表示結果には、「HTMLがフロートされたボックスで終わることを想定されていない」ことが関係しています。 この思想自体が本件の問題であり、ブラウザの補完実装の不備と言えるのかもしれません。 この問題の解消には、HTMLをフロートボックス以降にフロートさせないボックスが存在すればよいので、 #1でも仰られるように、 <div id="container"> <div class="header">　ヘッダー　</div> <div class="left">　メニュー　</div> <div class="right">　内容　</div> <div id="footer"> 内容 </div> </div> とし、#footerにclear:bothが指定されればよいはずです。 しかし、footerに記述する内容が無いようであれば、 <div id="footer"> 内容 </div> の代わりに、 <div id="container"> <div class="header">　ヘッダー　</div> <div class="left">　メニュー　</div> <div class="right">　内容　</div> <br> </div> とし、br要素にclear:bothを指定した方が構成上は妥当な気がします。 containerというdiv要素内なので、インライン要素を記述でき、一応Valid HTMLです。 ※しかしながら、br要素はインラインレベルでの強制改行を意味付けるものなので、ブロックレベル要素のfloat解除のためにclear属性やらclearプロパティを指定するのはValid HTMLであるとは言えません。が、内容が空のブロック（レベル）要素を<div style="clear:both;"></div>といった形で記述するよりは意味的に合っているように思います。 いずれにせよ、最初に記述したとおりフロートボックスでHTMLを終了していることが抜本的な原因なので、footerに相当するブロック（レベル）要素が存在するようなページを作成されればよいと思います。 ※「ブロック（レベル）要素」と書いたのは、インライン要素にdisplay:blockが指定されている場合も含む。という意味です。構造的には正当なブロック要素を用いることになると思いますが。