『floatの親要素の背景が表示されない』の対処法です。
floatによる２段カラムは、よく使われる手法ですが、Internet Explorerではちゃんと背景が表示されるのに、
FirefoxやOperaなどで検証すると背景が消えているということがあります。
これってFirefoxのバグなんじゃないのって感じで、Firefoxを悪者扱いしている人がいますが、実は違います。
IEのほうが間違っていて、floatはそういうものなのです。
[参考記事] floatした領域の親要素にwidthやheightを指定すると領域の算出にfloat領域を含める
では背景を表示させる方法ですが、まずは有名なclearfixを使うパターンです。
ただしこの手法は最下部に使うと、若干の下マージンが出ます。
/* ここにドットなどを入れないとNetscape 7で背景が出ない */
/* 半角空白では意味が無い */
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
line-height:0;
/* 次のような指定を入れるとNetscape 7で背景が出ない
font-size:0;
次の指定でも同じです。
font-size:0.1em;
*/
}
/* ¥*//*/
.clearfix{
display:inline-table;
}
/* */
/* ¥*/
html .clearfix{
height:1%;
}
html>body .clearfix {
height:auto;
}
.clearfix{
display:block;
}
/* */
floatの親要素にoverflowを指定することでも回避できます。
ただしNetscape 7 で条件によりおかしくなります。
ここでoverflowのおさらいです。
[参考記事] CSS辞典 overflow（バグがまとめてあります）
[参考記事] 古いバージョンのIEを検証する
visible はみ出した内容を指定された幅や高さの内容領域からあふれて表示する
hidden 内容領域を超えるものは切り取られ、スクロールバーをつけない
scroll 内容領域を超える・超えないにかかわらず、常にスクロールバーをつける
auto UAに依存、内容領域を超える場合はスクロールバーをつける
それぞれのサンプルです。
無指定
visible[これが初期値です]
hidden
scroll
auto
WindowsIE5,6ならvisible、それ以外のブラウザならautoということでまとめると次のようになります。
（autoだとIE6で、ホイールクリックのでスクロールすることができなくなります。）
サンプル
サンプル[width指定なし]
Windows IE5〜
Mac IE5
Firefox
Netscape7
Safari
Opera7〜
対応
(〜Opera6はwidth指定なしだと表示されない)
<div id="contents">
<div id="main">
<p>本文</p>
</div>
<div id="menu">
<p>メニュー</p>
</div>
</div>
</body>
/*WinIE5,6の指定*/
#contents {
overflow:visible;
height:1px;
}
/*WinIE5,6・MacIE5以外の指定*/
html>body #contents{
overflow:auto;
height:auto;
}
/*MacIE5の指定*/
/* ¥*//*/
html>body #contents {
overflow:visible;
}
/**/
#contents {
width:500px;
background-color:#0f0;
}
#contents #menu{
float:left;
width:150px;
}
#contents #main{
float:right;
width:300px;
}
Netscape 7では、この領域内でtext-align:-9999pxなどとした画像置換えをすると
スクロールバーが出ます。
position:relative にして left:-9999px としても同様です。
