CSSテクニックコミュのbackground-colorが反映されない

float段組みでレイアウトをしているのですが、画像のようにIE系とFirefox、operaで表示が異なってしまいます。

知識不足のせいで自分のミスかブラウザのバクかわからない状態です。ご指南よろしくお願いします。

HTMLソース--------------------------------
<body>
<div id="site">
<div id="header"><p>CSSレイアウトサンプル</p></div>
<div id="main">
<div id="navi">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
</ul>
</div>
<div id="content">
<p>サンプルページです</p>
</div>
</div>
<div id="footer"><p>(C)2005 kakeru</p></div>
</div>
</body>
------------------------------------------

CSSソース---------------------------------
*{
margin:0;
padding:0;
}
#site{
width:1024px;
background-color:#666666;
}
#site #header{
width:1024px;
background-color:#99FF00;
}
#site #main{
width:1024px;
background-color:#CCFF00;
}
#site #main #navi{
float:left;
width:200px;
background-color:#FF9900;
}
#site #main #content{
float:left;
width:824px;
background-color:#009999;
}
#site #footer{
width:1024px;
clear:both;
background-color:#99FF00;
}
------------------------------------------

コメント(4)

最初
全て
最新の40件

[1] mixiユーザー 10月20日 12:29

この場合、#mainの背景色が表示されないFirefoxのほうの表示が仕様どおりだと思います。

理由は#mainのボックスの高さは、左右にfloatした#naviと#contentのボックスには左右されないからです。つまり、#mainの高さが#naviと#contentのボックスの下辺まで及ばず、背景色が表示されないということです。

#footerを#mainのボックスの中に収め、clearプロパティを指定すれば、Firefoxでも#mainのボックスの高さが、#footerのボックスの下辺まで及び、背景色は表示されますが、文書構造を変えたくない場合には、以下を参考にしてみてください。

「How To Clear Floats Without Structural Markup」
http://positioniseverything.net/easyclearing.html

今回の場合、上のやり方に則ると、次の記述を追加して、

#site #main { display: inline-table; }
#site #main:after {
content: "."; display: block; height: 0px; visibility: hidden; clear: both;
}
/*\*/
* html #site #main { height: 1%; }
#site #main { display: block; }
/**/

#footerのclear:bothを削除すれば良いということになります。

[2] mixiユーザー 10月20日 13:25

ありがとうございます！

floatを指定した場合、親要素は子要素の高さに左右されなくなるんですね。勉強になりました。

でも、何故そのような仕様になってしまったんでしょうね。
個人的にはIEのような解釈のほうが便利なのですが…

あと、inline-tableや:afterなんてものがあったことを始めて知りました。

ありがとうございました。

[3] mixiユーザー 10月20日 14:30

そういえば、

#site #main { overflow: auto; }

とするだけでも同様に背景色が表示されます。
overflow: auto;の挙動は各UAに依存することになっているらしく、なぜこれで#mainのボックスの高さがfloatを指定したボックスの下辺まで及ぶのかはわかりません。
FirefoxやOpera、Safariでも同様にこれで解決できます。

難しそうなものを紹介する前に、先にこっちを紹介するべきでした。

[4] mixiユーザー 10月20日 15:26

たった一行で解決ですか（＾＾；）

でも、UAに依存するってことは、次世代ブラウザではその方法は使えなくなるなんてことも考えられますよね。

邪道かも知れませんが、#main内の最後にbrにclear:bothを指定する方法が一番手っ取り早いかなぁって思いました。

ログインすると、みんなのコメントがもっと見れるよ