JSFiddle を参照してください: http://jsfiddle.net/yYAD7/2/
h1 要素がフローティング ボックスの下に展開されている理由を知っている人はいますか? h1 内のテキストは正しく流れています。ボックスの先頭までborder-bottomを拡張したいので、inline-blockは解決策ではありません。「醜い」解決策は、div.rightのmargin-leftをborder-leftに置き換え、左の境界線の色を背景に似たものに設定することですが、誰かがよりきれいな解決策を持っているかもしれません?
<div class="box">
<div class="right">h2 border-bottom expands below this box </div>
<h1>This is a a rather long title, the text does flow correctly</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non lectus at turpis iaculis aliquam. Donec luctus tellus eget orci mollis eleifend. Fusce ultrices consequat nulla nec vestibulum. Mauris vel accumsan dolor. Mauris porttitor libero leo, in sagittis sapien congue ac. Aliquam hendrerit blandit ornare. Vivamus varius egestas tortor, eget blandit libero faucibus id. Praesent id tellus diam.</p>
<div class="clear"></div>
</div>
.box { width: 500px; padding: 5px; border: 1px solid #000; }
.right { float: right; width: 100px; height: 160px; padding: 20px 0; background: #ccc;
font-size: 11px; opacity:0.8; filter:alpha(opacity=80); text-align: center; }
h1 { border-bottom: 2px solid #000; margin-top: 0px;}
.clear { clear: both; }
ありがとう！