How can I make an H4 element behave like an HR when floats are present

Question

Here's my code:

http://jsfiddle.net/beA4a/

<div style="float:right; width:200px; border:solid 1px #000; height:300px;"></div>
<p>Text</p>
<hr/>
<h4 style="border-bottom:solid 1px #000;">H4 Text</h4>

Notice how the hr stops at the floated div but the h4 passes right thru it. Is there any CSS I can apply to the h4 to make it behave the same way without specifying a width on the h4?

I want it so that if the h4 was pushed below the floated div it would then take up the full page width as the hr would.

Answer 1

Just add overflow: hidden to the h4

h4{
   overflow:hidden;
}

Demo