高さの異なるカラムを揃えるスタイルシートの、(もしかしたらとてもスタンダードかもしれない)特殊な用例です。
ブログ等の2カラム以上のレイアウトを持ったページデザインで、次のように困った事はないでしょうか。
(なお、ここでの問題はブラウザの実装ミスか、はたまたW3Cで定義された仕様なのか、Mozilla系ブラウザであるFireFoxの各バージョンでのみ確認しました。Win版InternetExplorerでは何故かこの問題が発生しないほか、その他のブラウザでは確かめていません。)
全体の背景色Blackに対して、左右2カラムを囲う背景色Whiteを指定したい。
そこで上記サンプル内に示すように、両カラムを内包する親要素containerに背景色を指定するも、 親要素のpadding長の大きさ分しか背景色が表示されない。
これはどうやら中の子要素(カラム)がfloat属性でレイアウトされている事により、親要素containerが子の高さを得る事ができず、結果、子の高さを0として描画しているために起こるもののようです。
そこで、今回高さの異なるカラムを揃えるスタイルシートで紹介されていた手法を用い、子要素の高さを一律にしてみましょう。
見ての通り、背景色がちゃんとカラムの高さに合わせて表示されるようになりました。
デザインのこういった部分はサイトの見栄え、加えて使い勝手も大きく左右する部分なので、背景が2種類以上、かつ2カラム以上のWebサイトを運営している方は、是非一度、InternetExplorer以外のブラウザでの表示も確認してみてはいかがでしょうか。



