<hr /> issue

I have made two containers at the bottom of a page and I wanted to put a line underneather to separate them. But my line appears above the containers, and i'm not sure why? any ideas?
heres the html
<div class="homeboxnames">
<a href="#">News</a>
</div>
<div class="homeboxnames" style="float:right; margin-right:319px;">
<a href="#">Recent Photos</a>
</div>

<div class="homeboxes">
containers
</div>
<div class="homeboxes" style="float:right;">
containers 2
</div>
<hr />

and the css

.homeboxnames {
font-size:20px;
text-align:center;
display:block;
background-color:#FF0000;
padding:2px 20px;
-moz-border-radius:7px;
float:left;
margin-bottom:10px;
}
.homeboxnames a{
text-decoration:none;
}

.homeboxnames:hover{
background-color:#CC33FF;

}

.homeboxes {
width:490px;
height:300px;
background-color:#00FF00;
float:left;
margin-bottom:5px;
}

would I have to style the hr tag to appear at the bottom? If so what would it be?
thanks!:)

All of the divs are floated so that takes them out of the regular flow. The <hr/> tag is not floated so it is still in the regular flow.

One fix would be to wrap the floated divs inside another div and specify overflow:hidden on that div to force it to contain the floated content. You can then put the <hr/> after that div.

ps. get rid of the space before the / as that was only necessary when serving the xode as HTML to Netscape 4 and is no longer necessary now that no one uses that browser any more.

Sorted, and thank you for the advice aswell :)

Based on the attachment, I see that the divs may be floated, as the first container is stuck to the upper left-hand corner. The second container looks fine. Instead, you can try margin positioning, as they can be very precise in determining the correct location of the containers. For example:

#container
{
margin-top:100px;
margin-bottom:100px;
margin-left:100px;
margin-right:100px;
}