help with float

[meltedtoons]

On my home page I have two DIVs that float left to right but the problem is my CONTENT DIV dosen't come down all the way with it take a look http://answermyhw.webs.com/bantingriver.html

HTML

<div id="content">
<div id="news"><span style="font-weight: bold;">Latest
News <span style="color: rgb(153, 153, 153);">Oct 30 2010</span><br>
</span>&nbsp;&nbsp;&nbsp;<small> news goes here</small><br>
<br>
</div>
<div id="rules">
<hr>
<p>rules go here </p>
<hr>
</div>
</div>

CSS

#rules {
width: 400px;
height: auto;
float: right;
}

#news {
width: 550px;
height: auto;
float: left;
}
#content {
width: 986px;
height: auto;
background: white;
overflow: inherit;
padding:10px 5px 15px 5px;
border-right: solid 2px;
border-left: solid 2px;
}

[meltedtoons]

oh never mind found the problem, I noticed the content's overflow is set to inherit so i changed it to auto