CSSハック

floatを使って2カラムのページ(左:block-1、右:block-2)を作った場合、block-1・block-2を含むブロックの背景(block-0)などなどが、FireFoxなどで表示されません。
float=浮き上がっている、ということで、高さがない扱いになってしまう…らしい。
 
んなもんで。

<div id="block-0">
  <div id="block-1">text</div>
  <div id="block-2">text2</div>
</div>

の場合、通常は

#block-0 {
  width: 300px;
  background-color: #CCCCCC;
}
#block-1 {
  float: left;
  width: 100px;
  background-color: #FFFFFF;
}
#block-2 {
  float: right;
  width: 150px;
  background-color: #333333;
}

と書いてしまうが、これだとIEではきちんと箱に入ってみえても、FireFoxではblock-0の背景が表示されなくなる。
なので、

#block-0 {
  width: 300px;
  background-color: #CCCCCC;
  overflow: hidden;
}
#block-0:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}
/*\*/
* html #block-0 {
    height: 1em;
    overflow: visible;
}
/**/
#block-1 {
  float: left;
  width: 100px;
  background-color: #FFFFFF;
}
#block-2 {
  float: right;
  width: 150px;
  background-color: #333333;
}

と記述することで、FireFoxでも背景を表示することができるようになる。

参考サイト:CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件