CSSで内容量が異なるボックスの高さを揃える

テーブルでレイアウトを組んでいたときは意識すらしなかった、「内容量の違うボックスの高さを揃える」ということが、テーブルを使わないと急に難しくなります。

どういうケースでそうなるかというと、ウチのサイトのリンクページが良い例です。
一つの記事が矩形の小さなボックスになっていて、これを、float; left で並べています。
内容量がだいたい同じくらいのときは問題ないのですが、極端に内容量が違うとき、一つの記事の隣に二つの記事が回り込んだりしてしまいます。

もちろん、height で高さを指定してやれば揃う訳ですが、テーブルレイアウトのときは内容量に合わせて高さがいい感じになるのに、CSSでは固定高になってしまう（十分な高さにすると余白が出すぎる）というのはどうかと思いますよね。

そこで、魔法の呪文みたいな設定があります。

ネタ元はここ
[CSS]高さの異なるカラムを揃えるスタイルシート

解説すると、各ボックスをdivで囲んで、そのdivに対して「padding-bottom」にプラス、「margin-bottom」に同じ数値をマイナスで指定を行い、それらをさらにdivで囲んで「overflow:hidden;」を指定します。

HTML
＜div class=”column”＞
　＜div class=”box”＞・・・＜/div＞
　＜div class=”box”＞・・・＜/div＞
　＜div class=”box”＞・・・＜/div＞
＜/div＞

CSS
.column {
overflow: hidden;
}
.box {
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;
}

32768という数値に意味があるかどうかはよくわかりません（笑）

通常のサイトなら、これで良いのですが、実は Movable Type にはこのまま適用することが出来ません。
ボックスを1列ごと（たとえば3つごと）にdivで囲まなければならないのに、＜MTEntries＞などのMTタグでは、そんなことはできないのです。

というわけで、続きは次の記事で