Text wraps around floating div but borders and <hr />s do not

I know this problem was posted some time ago, but I had the same problem today and found another solution:

http://jsfiddle.net/MvX62/

I use border-bottom instead of the <hr /> tag and had to add an overflow: hidden;. Look at the fiddle, i think this is more useful then the accepted solution, because you can also add a margin to the horizontal line and there is the same gap, as the text has.

Also you don't need to define z values and don't need any hacks or workarounds.

I've had this problem before, and I wasn't sure if it was solvable.

In your case, however, you could wrap the green box with another element and swap margin with padding and set its background to #fff to cover the offending line.