サイドバーとコンテンツの高さをそろえるには

質問

こんにちは。
自分のホームページを作っているのですが、
サイドバー（navi）とコンテンツの高さを合わせられず、困っています。
どなたか詳しい方、教えて頂けないでしょうか。

<div id="container">
<div id="contents"></div>
<div id="navi"></div>
</div>

として、floatでコンテンツを右、naviを左に配置。

ボーダーは、containerの左右に実線
navi の右に実線をしていますが、
naviがcontentよりも短いと、図の左のように線がかけてしまいます。

背景色は白で、ボーダーで区別をしたいのですが、
navi　と、コンテンツの高さを自動で合わせるにはどうすればいいでしょうか。

検索で調べてみると、背景色を利用したものやJavaを使ったモノなど様々で、
僕の利用用途に合わないので困っています。
どうぞよろしくお願いします。

回答No.1

metametamu · ベストアンサー

実はこの場合、全てのborderを背景画像で作っておいて、#containerでrepeat-yさせるのが簡単です。
仮に#containerの幅を800pxとしておきます。

#container{
width:800px;
background:url(bg.png) repeat-y center 0;
overflow:hidden;
}

float対策にoverflow:hidden;も指定します。