ここではfloatの後ろというか下というかとにかく背景が表示されない時の解決方法を紹介します。
後ろとか下と言っていますが、詳しく言うとfloatを囲っているボックスの背景が表示されないということです。
色々とサイトを参考にしていると同じ壁にぶつかった方がたくさんいると思いました。私も実際このサイトを作る時にぶつかった壁でしたし、仕事でも同じ壁にぶつかりました。それでほぼ自分用にですが、書き留めておきます。
なお、今回はこちらのサイト(Fsikiさん)の「CSSで段組したらFirefoxで背景が出ねーよっ」を参考にさせて頂きました。かなり参考になるサイトだと思います。
とりあえずいつも通りに作ってみる
とりあえずいつもの感じで作ってみると以下のようになると思います。
HTML
[html]
<div=”#container”>
<div=”#leftBox”></div>
<div=”#rightBox”></div>
</div>
[/html]
各指定は以下のようになります。
CSS
[css]
#container{
color: #000000;
background-color: #FFE9E9;
border: 2px solid #FF6E2E;
padding-top: 20px;
padding-bottom: 20px;
}
#leftBox {
width: 200px;
float: left;
border: 2px solid #777;
padding: 10px
}
#rightBox {
width: 200px;
float: right;
border: 2px solid #777;
padding: 10px
}
[/css]
ここまでのサンプルはこちら
そもそもfloatはボックスを浮かせるものだそうです。だから内側のボックスが全部浮いていれば、外側のボックスの高さはなくなってしまう。 上記のスタイルの場合、IEやFirefox、Operaではpadding分の背景(うすい赤)とボーダー(オレンジ)しか表示されません。
これは、ブラウザのバグではなく、正しい挙動だそうです。
外側のボックスに幅を指定する
次に外側のボックスに幅を指定すると以下のようになります。
leftBoxとrightBoxの指定は変更しませんので、省略します。
各指定は以下のようになります。
CSS
[css]
#container{
width: 500px;
color: #000000;
background-color: #FFE9E9;
border: 2px solid #FF6E2E;
padding-top: 20px;
padding-bottom: 20px;
}
[/css]
ここまでのサンプルはこちら
幅の指定をすると、不思議とIE(6,7beta)で背景が中のボックスの高さに合わせてでてきます。
これはIEのバグだそうで、FirefoxやOperaでは変化は見当たりません。
ここで背景が出ないという現象が起きているわけです。
解決方法
この方法ならばかなりのブラウザでも大丈夫だと思われるのが以下になります。
CSS
[css]
#container{
width: 500px;
color: #000000;
background-color: #FFE9E9;
border: 2px solid #FF6E2E;
padding-top: 20px;
padding-bottom: 20px;
overflow: hidden;
}
#container:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
/*\*/
* html #container {
height: 1em;
overflow: visible;
}
/**/
[/css]
まず追加したのがoverflow: hiddenです。しかしこれだけではNetscape7.1では全く内容が見れなくなります。実際Netscape7.1を使っている方の割合は低い方だと思いますが、日本語版ではNetscape7.1は現時点で最新版ですのでそのブラウザで全く見れないのは致命的だと思います。そこで#container:afterを記述することでNetscape7でも問題なく表示されるようになります。
overflow: hiddenを指定したのはMacIEで背景が表示されるようにするためです。またこれで、displayの値はblockのままとなりJavaScriptでのobject.style.displayを操作する場合も問題なくなります。
WinIE用に高さが指定してあり、そのままだと高さ1emより溢れる内容が隠れてしまうので、バックスラッシュハックでoverflow: visibleを指定してあります。
ここまでのサンプルはこちら
実際必要なソース
では実際に必要なものはどれかと言うと以下のものになります。
CSS
[css]
#container {
overflow: hidden;
}
#container:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
/*\*/
* html #container {
height: 1em;
overflow: visible;
}
/**/
[/css]