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

質問

ご教授いただけますでしょうか。

CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。

内容は、大枠の中に、ヘッダーと左右のフロート（左：メニュー、右：内容）のシンプルなデザインです。

以下、CSS部分です。

/* 大枠 */
#container {
width: 800px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
font-size: 13px;
border-left: 1px #663333 solid;
border-right: 1px #663333 solid;
border-top: 1px #663333 solid;
border-bottom: 1px #663333 solid;
padding: 5px;
text-align: left;
}

/* ヘッダー */
.header {
width: auto;
height: auto;
background: url(img/header.jpg) repeat-x;
margin: 0px;
}
/* メニュー */
.left {
float:left;
width:20%;
background-color:#ffffff;
padding: 5px;
}

/* 内容 */
.right {
float:right;
width:75%;
background-color:yellow;
padding: 5px;
}

ここからHTMLに書き込んだものです。

<div id="container">
<div class="header">　ヘッダー　</div>
<div class="left">　メニュー　</div>
<div class="right">　内容　</div>
</div>

Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。

どこがおかしいか、ご指摘いただければ幸いです。
どうぞよろしくお願い申し上げます。

回答No.1

frogeye · ベストアンサー

多分、Firefoxではfloat指定されているボックスの高さを計算しないからだと思います。
# バグっぽいですが。

とりあえず
<div style="clear:both;"></div>
を最後に入れると全て囲んでくれそうです。
（別にdivである必要は無いのですが、ページフッタに使うことが出来るので）

お礼

早速のご返信をありがとうございます。
ご指摘のタグを入れたら、一発で解消しました。

同じような過去の質問も見たのですが、どうしても要領を得ることができなくて、質問させていただきました。
すっきりと解決して、大変助かりました。
ありがとうございました。

回答No.4

noname#261745

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

参考URL：

http://www.geocities.jp/multi_column/float/05.html

お礼

ご回答をありがとうございます。
ご指摘の通り、自動で認識してしまうIEこそおかしいのかもしれませんが、より利便性を高めた作りであるがために、仕方が無いのかもしれません。
でも、他のブラウザが頭角を現してきた今、それが逆にウェブデザインの隠れた大きな問題になりつつあると思います。

回答No.3

suzuki-_-

中身がfloatされているので、浮遊状態となり高さを取得できないのでしょう

#container に

overflow:auto;

または

overflow:hidden;

を追加するか、#container自体をfloatさせてしまえば、無駄なタグを付け加えずに解決するかと思います

お礼

ご回答をありがとうございます。
先のお二方とはまた別の方法で、大変参考になりました。

CSSも様々なアプローチがあり、IE主体で作るものの他ブラウザの利用も高く無視できないので、助かりました。

余談ですが、Nesscapeって最近見ませんね…。

回答No.2

quads

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が指定されている場合も含む。という意味です。構造的には正当なブロック要素を用いることになると思いますが。

お礼

早速のご回答をありがとうございます。
また詳しくご説明いただきまして、やっと理解することができました。

本当は「良回答」を付けさせて頂きたいのですが、すばやく解決することができたので、先に回答してくださった方を優先しました。
申し訳ございません。

CSSはまだまだ勉強不足で、過去の質問をしょっちゅうひっくり返しています。またお目にとまることがございましたら、お助けいただければ幸いです。
ありがとうございました。