背景画像をborderの代わりに利用する

#boxB {
    width:400px;
    float:left;
}

borderの問題点

幅700pxのdivの中に幅400pxのボックスBと幅300pxのボックスCがあり、ボックスBとCをフロートさせることにより2段組を作っています。

ボックスBとCの間に境界線を描きたい場合、ボックスBにborder-rightまたはボックスCにborder-leftを指定する方法では、以下の問題があります。

content-boxではボックス（B or C）のサイズがボーダーの分だけ増加してしまうが、border-boxではボーダーの分だけ減少してしまう。よって、content-boxとborder-boxのどちらの解釈に対しても同じ表示をさせることができない。
ボーダーが描かれるのはborderを指定したボックスの高さが続く部分までである。どちらのボックスが長くなるかわからない場合、ボーダーが途中で途切れる状況が出てくる。

ひとつめの問題に対しては、ボーダーによるボックスサイズの違いを許容できるようにコンテナの幅をボーダーの分だけ広めにとることで対処できますし、ふたつめの問題に対しては、両方のボックスにborderを指定し、どちらかのボックスに負の左（右）マージンを与えてボーダー部分を重ねることで対処できます。

しかし、より簡単な解決は、ボックスBとCのコンテナブロックの背景画像でボーダーを再現することです。

#boxC {
    width:300px;
    float:left;
}

ボックスBとCのコンテナブロックに背景画像を指定することでふたつのボックスの間に境界線を描くことができます。ここで用いる背景画像は、それぞれのボックスの間にボーダーの描かれた画像です。

この方法ならボックスサイズが変わることはないため、content-boxとborder-boxのどちらの解釈に対しても同じ表示をさせることができます。

また、カラムの間に境界線を描くのではなく、これらのボックスをまとめて枠で囲みたい場合もそのような画像を利用することで実現できます。

ただし、この方法は固定幅の場合には簡単ですが、可変幅では非常に困難です。

#boxD {
    width:100%;
    clear:left;
}

この方法は背景画像を担当するフロートの親ボックスがフロートを完全に内包している必要があります。コンテナの高さを確保する方法は基礎編5 フロートの性質を参照してください。