CSSでの段組で、下辺を揃える方法

質問

CSSで段組をしようと思うのですが、うまくいかないのでご教授下さい。

左と右にボックスを配置し、それぞれにテキストが入ります。

中のテキストは量がまちまちだったり、大きさが可変であったりするのですが、
文字の量・大きさに関わらず、左と右のボックスの下辺が同じになるように、
つまりボックスの高さは、常に両方が同じになるようにしたいのです。

テーブルタグでの段組であれば、
セルに文字を入れておけば自動的にこういう状態になりますが、
CSSのボックスでは、どちらかの量が少なければ、
少ない方の下辺が上がってしまい、高さが揃いません。

CSSの本を何冊か買って読んではみましたが、
こういう場合、heightを数値で指定してしまっている場合が多く、参考になりませんでした。

よろしくお願いいたします。

回答No.2

kaiwarepon · ベストアンサー

左右のボックスの高さを揃えるというのではなく、そのように見せるのであれば、左右のボックスを囲むボックスを作成し、左右の背景色または罫線を1枚の画像（高さ1pxの横長の画像）として作成し、背景画像とします。
例えば左側のボックスの幅が200px、右側が400pxとして、1px×600pxの画像の左から200px分を左側のボックスの背景色、残りを右側のボックスの背景色に塗りつぶし、GIF画像とし、左右のボックスを囲むボックスの背景画像として縦方向リピートで指定します。
<div style="width:600px;background:url(background.gif) 0 0 repeat-y;">
<div style="width:180px;padding:10px;float:left;">
<p>左のボックス</p></div>
<div style="width:380px;padding:10px;float:right;">
<p>右のボックス</p></div>
<div style="clear:all;"><img src="background.gif" style="width:600px;height:1px;border-none;"></div>
</div>
左右のボックスを囲むボックス内の最後でフロート解除を忘れずに。
それぞれのボックスを罫線囲みにしたい場合は、背景画像にそれぞれの左右の罫線位置に罫線の幅分の罫線色の部分を作り、上下の罫線は左右のボックスを囲むボックスのborder-top、border-bottomで指定します。

お礼

ご回答、ありがとうございました。

うまくいきました！
ここ最近ずっとこれで悩んでいたので、大変助かりました。
記述が、他に比べるとシンプルなのも嬉しい所です。
やっぱり、尋ねてみるもんですネ。

改めて、ありがとうございました。

回答No.1

steel_gray

実質的なブロックの高さをコントロールするには現状では仕様・ブラウザの実装状況の問題があって、
CSSを使うよりテーブルに頼った方が現実的ですが、見た目をそれっぽくする方法ならばいくつかあるようです。
http://allabout.co.jp/internet/hpcreate/closeup/CU20050328A/

お礼

ご回答、ありがとうございました。

そのページは実は以前から知っていました(^_^;
ページの通りにやってみたこともあったのですが、私の環境がおかしいのか？
うまくいかなかったので、ここで質問してみようと思い立ちました。
でも、あのサイトはいろいろ参考になる所ですよね。