float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。これを、clear を使わずに overflow で解決しちゃう方法。
簡単に説明してみます。container 内に left と right があり、それぞれを左右に float させています。で、実はcontainer に背景色 #ddffbb を指定しているのですが、反映されてません。
container 自体の高さを指定していないので、下方に伸びないからです。これを解決するためには、(X)HTML に手を加えて clear させるしか方法はありませんでした。
しかし、container に幅と overflow を指定すれば解決します。
#container {
background-color: #ddffbb;
width: 100%;
overflow: auto;
}細かい注意点や応用などは、結構はしょっているのでネタ元を見てください。
Comments
なるほどー。これは色々と応用が効きそうですな。
有り難うございます。
実際、なんでこれで解決できるのかが不思議だったりもしますよね。
containerの背景色で悩んでいたところ、検索でこちらの記事にたどり着き、問題を解決できました。ありがとうございます。
つつい さん、お役に立てて良かったです:-)
こんにちは。いつも参考にさせていただいています。
このoverflowによる解決策ですが、残念な欠点がひとつあります。
それは、「マウスホイールクリックによるスムーズスクロールができなくなる」という問題です。マウスホイールによる通常のスクロールは動くのですが、クリックしたスクロールは効かなくなるのです。WinIE6だけの問題なのかもしれませんが。
情報、ありがとうございます。そうなんですか、それは確認していませんでした。後で確認してみます。
あと、NS7.1 ではうまく行かないって欠点もあるようですね。
ほとんどのブラウザで、背景を表示させる方法です。
http://kikky.net/pc/float_bg.html