HTML - CSS hr issue

Hi i had a problem today configuring my html page. My sample code is:

<div style="width: 100%">
    <div style="width: 80%; float: left;">
        Text on div 80%
    </div>
    <div style="width: 20%; float:right">
        text on div 20%
    </div>
</div>
<hr>Text after hr

and as you can see the hr doesnt do his job because it dont show up where i set it to.

It should be like the following:

<div style="width: 100%">
    <div style="width: 80%; float: left;">
        Text on div 80%
    </div>
    <div style="width: 20%; float:right">
        text on div 20%
    </div>
</div>Only if i add text in this position the following hr works, how to fix it?
<hr>Text after hr

the problem is that after the div the hr doesnt show up!

I need to put some text before.. why it does that?