float の問題を overflow で解決

float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。これを、clear を使わずに overflow で解決しちゃう方法。

簡単に説明してみます。container 内に left と right があり、それぞれを左右に float させています。で、実はcontainer に背景色 #ddffbb を指定しているのですが、反映されてません。

container 自体の高さを指定していないので、下方に伸びないからです。これを解決するためには、(X)HTML に手を加えて clear させるしか方法はありませんでした。

しかし、container に幅と overflow を指定すれば解決します。

#container {
        background-color: #ddffbb;
        width: 100%;
        overflow: auto;
}

細かい注意点や応用などは、結構はしょっているのでネタ元を見てください。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/196

MS-K's irresponsible Diary - float させた要素を内包したボックスの高さ (2006年2月 4日 21:57)

Luchy bagさんで読んだんだけど、これ知らなかったぁ! float させた要素を内包したボックスは、高さを指定しないと下方に伸びません。こ... 続きを読む

Eblog - clearを使わずにfloatの親ボックスに背景を表示させる (2006年6月21日 16:45)

clearを使わずにfloatの親ボックスの背景を表示する方法を発見。 まだ試し... 続きを読む

AIRE-PROJECT BLOG - floatを内包したボックスの高さ問題解決 (2006年10月30日 10:10)

フルCSSでレイアウトしていると必ず起こる問題が、floatしているボックスを内... 続きを読む

Comments

ばあど said:

なるほどー。これは色々と応用が効きそうですな。
有り難うございます。

e-luck said:

実際、なんでこれで解決できるのかが不思議だったりもしますよね。

つつい said:

containerの背景色で悩んでいたところ、検索でこちらの記事にたどり着き、問題を解決できました。ありがとうございます。

e-luck said:

つつい さん、お役に立てて良かったです:-)

幸之介 said:

こんにちは。いつも参考にさせていただいています。

このoverflowによる解決策ですが、残念な欠点がひとつあります。
それは、「マウスホイールクリックによるスムーズスクロールができなくなる」という問題です。マウスホイールによる通常のスクロールは動くのですが、クリックしたスクロールは効かなくなるのです。WinIE6だけの問題なのかもしれませんが。

e-luck said:

情報、ありがとうございます。そうなんですか、それは確認していませんでした。後で確認してみます。
あと、NS7.1 ではうまく行かないって欠点もあるようですね。

kikky said:

ほとんどのブラウザで、背景を表示させる方法です。

http://kikky.net/pc/float_bg.html