高さの異なるボックスを揃えるCSS

この記事は2013年5月に公開したものです。ソフトウェアやサービスの仕様が変わり、現在の情報と異なる場合があります。

こんにちは。
SOHOデザイナーのAquaForest-アクアフォレスト-です。

cssで組んでいる時に高さが異なるボックスを配置してフロートしたりすると、
記事が回り込んでしまい思う様に表示出来無い場合があります。

また背景に色をつけたい場合にも内容量が少ない方に背景色を付けると、
途中までしか色が付かなくてかっこわるくなってしまいます。

そんなときでも下記の様に設定すれば解消されます。

HTML

<div id="mainbox"></div>
<div class="box">テキスト</div>
<div class="box">テキスト</div>
<div class="box">テキスト</div>

CSS

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

32768という数値はIEの表示限界であると言われているそうです。