2007年10月26日

float属性を持つ子の親が正しくheightを得られるようにする

2007_10_26_02

高さの異なるカラムを揃えるスタイルシートの、(もしかしたらとてもスタンダードかもしれない)特殊な用例です。

 

ブログ等の2カラム以上のレイアウトを持ったページデザインで、次のように困った事はないでしょうか。

(なお、ここでの問題はブラウザの実装ミスか、はたまたW3Cで定義された仕様なのか、Mozilla系ブラウザであるFireFoxの各バージョンでのみ確認しました。Win版InternetExplorerでは何故かこの問題が発生しないほか、その他のブラウザでは確かめていません。)

  1. 2007_10_26_00 
    全体の背景色Blackに対して、左右2カラムを囲う背景色Whiteを指定したい。
  2. 2007_10_26_01 
    そこで上記サンプル内に示すように、両カラムを内包する親要素containerに背景色を指定するも、 親要素のpadding長の大きさ分しか背景色が表示されない。

これはどうやら中の子要素(カラム)がfloat属性でレイアウトされている事により、親要素containerが子の高さを得る事ができず、結果、子の高さを0として描画しているために起こるもののようです。

そこで、今回高さの異なるカラムを揃えるスタイルシートで紹介されていた手法を用い、子要素の高さを一律にしてみましょう。

2007_10_26_02 (サンプルページ)

見ての通り、背景色がちゃんとカラムの高さに合わせて表示されるようになりました。

デザインのこういった部分はサイトの見栄え、加えて使い勝手も大きく左右する部分なので、背景が2種類以上、かつ2カラム以上のWebサイトを運営している方は、是非一度、InternetExplorer以外のブラウザでの表示も確認してみてはいかがでしょうか。

タグ:Web制作 CSS
posted by カシューカ at 16:37| Comment(0) | TrackBack(0) | Tips | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/62549720
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック