画像を利用して高さの違うボックスの下辺を揃える

floatを使用して横並びにした多段カラムの高さが違う場合、ボックスの下辺を揃えるには画像を利用します。

サンプル

(X)HTMLコード

<div class="wrapper">
   <div class="contents">左のボックス<br />余白<br />余白<br />余白<br />余白<br />余白</div>
   <div class="contents">真ん中のボックス</div>
   <div class="contents reset">右のボックス</div>
</div>

CSSコード

div.wrapper {
float:left;
width:320px;
background:url(bg_bottom.gif) 0 100% no-repeat;
}

div.contents {
float:left;
width:100px;
margin-right:10px;
border-top:1px solid #333;
}

div.reset {
margin-right:0;
}

カラムを横並びにする方法は当サイトの以下の記事を参考にしてください。

2段カラムの作り方（float編） - CSSデザインノート

カラムを囲っているdiv要素に以下のような画像を指定します。ポイントは、縦幅が高くてもきちんと表示されるように長めに画像を作ることです。

今回は四角い枠で囲んでいるタイプなので、各カラムの上部にborderをつけていますが、画像でも問題ありません。

カラムの右側にmarginで余白を空けているのですが、最後のカラムの右側のmarginは0にしておきます。これはカラム落ちになるのを防ぐためです。

ここでは記述していませんが、このfloatボックスの次に何か要素がある場合、その要素も回り込んでしまうので、｢clear:both;｣で回り込みを解除してください。

この方法は、画像をきっちり1pxもずらさずに作らないといけないので結構面倒ではあります。