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を指定したボックスを含むボックスの背景が出なくなる件