Double Bulleted List Css Problem

[enchantedlingerie]

hi everyone i was hoping someone could give me a hand. i have created a double column bulleted list to show subcategories on the main category page. but something is throwing off the footer. I know the problem is with the new css for the list because when i remove it the footer fixes itself. have a look at this page and look at the footer.

Look Here

This is the html i have on that page

<h1>     Baby's Health</h1>
<img src="/images/baby.jpg" width="170" height="227" alt="" border="0" align="right"> <br><br>
<p id="prodindex">Explore More About Children's Health  
When parents think about their child’s health, it is important that they not only consider the physical wellbeing of the child, but the psychological and social health as well. </p>
<p id="prodindex">This broad field of children’s health includes psychological issues surrounding mood, behavior, learning, and concentration, as well as physical areas such as appetite, bedwetting, fever, sleep, chicken pox, tantrums, weight loss, and more.</p>
<p id="prodindex">It even includes complicated, and increasingly diagnosed behavioral health issues like Autism, Asperger’s Syndrome, and Attention Deficit Disorder/Attention Deficit Hyperactivity Disorder. </p>
<p id="prodindex">Below you will find a comprehensive set of herbal remedies to help you manage and optimize your child's health – naturally and safely.
<br>
<br>
<h1><center>Baby's Health Categories</center></h1><hr color="#800000"><br>
<br>
<div class="list">
  <ul
    ><li><a href="http://www.gothenaturalway.com/index.php?main_page=index&cPath=250_263">Calm And Soothe</a></li
    > <li><a href="http://www.gothenaturalway.com/index.php?main_page=product_info&cPath=250_267&products_id=10">Peace And Strength</a></li
    ><li><a href="http://www.gothenaturalway.com/index.php?main_page=product_info&cPath=250_267&products_id=10">Cradle Cap</a></li
    ></ul>
</div>
<div class="list">
  <ul start="5"
    ><li><a href="http://www.gothenaturalway.com/index.php?main_page=product_info&cPath=250_265&products_id=47">Teething</a></li
    > <li><a href="http://www.gothenaturalway.com/index.php?main_page=product_info&cPath=250_266&products_id=54">Diaper Rash</a></li
    ></ul>
</div>
</ br>

and this is the css i added to the style sheet

/* position list chunks side by side */
div.wrapper
{
float: left;
width: 10em;
}
/* clear float after lists */
br
{
clear: left;
}
/* anchor styling */
ol li a
{
display: block;
width: 7em;
text-decoration: none;
}
ol li a:hover
{
color: #FFF; /* white */
background-color: #A52A2A; /* brown */
}

if someone could just have a look and tell me where i went wrong, im getting much better at css, but there is still alot im not sure of and im just not sure what is throwing this footer off, im sure its simple and im sure i will feel like a dumbass when i know the problem.

thanks so much

[enchantedlingerie]

problem fixed thanks anyways