See JSFiddle: http://jsfiddle.net/yYAD7/2/
Does anyone know why the h1 element is expanding below the floating box? The text within the h1 is flowing correctly. inline-block is not a solution, as I want the border-bottom to expand UNTIL the beginning of the box. An 'ugly' solution would be to replace the margin-left of div.right with a border-left and set the color of the left border similar to the background, but maby someone has a cleaner solution?
<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; }
Thanks!