float 属性を使って2カラムのレイアウトを作っているんだけど、結構ハマっている。特に良く分からなかったのが 2つほど。 カラムを含む親要素の高さ 何でも子要素が float 指定されているものばかりだと、親要素の高さは子要素の高さと無関係に決まるのだそうな。背景を知らないので不思議な仕様に思えるけど、これを解決するために「clearfix」というテクニックが広く使われている。 子要素の高さ clearfix で親要素の高さの問題は解決するものの、次の問題はカラムとなっている子要素の高さが左右の要素で揃わないこと。そろえたいときは以下のどちらかを選ぶしかなさそう。

1. 親要素に背景画像を設定する
2. JavaScript ライブラリを利用する (例 1、例 2)

と思っていたら CSS だけで要素の高さを揃える記事を発見。 -> 「Equal Height Columns with Cross-Browser CSS」 頭いいなあ。「親にも float の指定をしておくと親の高さ＝子の高さになる」というのもポイントね。ただ、私にはこのあたりのテクニック開発ってあんまり楽しいと思えない…。出来ない人の僻みっぽいけど。 追記 最後に紹介した要素の高さを揃える方法は、幅がウィンドウ一杯のレイアウトでないとうまくいかないようだ。少なくとも私には何とかできない。