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

Question

I have a div that is float: right and it is inside a parent div. There are p elements inside that same parent div also, and the text wraps around the float: right div properly.

However, if I set the p elements to have a border, or do a <hr />, the border does not stop where the text stops, but extends behind the float: right div.

Here is a beautiful mspaint depiction of the situation:

Note that the green part of the black horizontal line is behind the floating div.

How do I get the border or <hr /> or whatever to be only as wide as the text, and not go behind the div?

Answer 1

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.

Answer 2

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.