<hr /> issue

[joe2730]

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!

[felgall]

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.

[joe2730]

Sorted, and thank you for the advice aswell

[Taro]

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;
}