Layout help - category vertical navigation in left div coming out of site

Can you help me with a layout issue. The problem is the left div (containing the main horizontal navigation) is often longer than the main div. Instead of the body moving down inline with the height of the left div, the left div is coming out of the design and crashing into the footer.

I can't see what I'm doing wrong here. The site has a wrapper, header, body wrapper, body, left, main and footer.

I hope you are able to take a look through and point me in the right direction to fixing this issue. Thank you in advance! John

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en" xml:lang="en">
  <head>
    <title>
      womens clothing
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
a img, img {
    border: none;
}
.hide {
    display: none;
}
.left {
    float: left;
    position: relative;
    display: inline;
}
.right {
    float: right;
    position: relative;
    display: inline;
}
/* Testing imported from default stylesheet */
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading, .rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
    text-align: center;
}
.back {
    float: left;
}
.forward {
    float: right;
}
.clearBoth {
    clear: both;
}
/* End Test */
.clear {
    clear: both;
}
html {
    background: #f3f3f3 url(../images/bg.gif) center top repeat-y;
}
body {
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}
#wrapper {
    position: relative;
    margin: 0 auto;
    background: #e0e0e0;
    width: 980px;
}
#header {
    position: relative;
    width: 980px;
    height: 102px;
    float: left;
    background: url(../images/bgHeader.png) no-repeat;
}
#bodyWrapper {
    background: white;
    /*padding-bottom: 60px;
*/
    position: relative;
    float: left;
    width: 980px;
}
#left {
    width: 200px;
/* 250 in total*/
    position: relative;
    float: left;
    padding: 0 45px 0 20px;
    top: 45px;
}
#categories {
    padding-bottom: 1px;
    background: url(../images/bgDots.gif) repeat-x left bottom;
    position: relative;
    float: left;
}
#categories ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 200px;
}
#categories a {
    font-size: 0.8125em;
    color: #595959;
    text-decoration: none;
    padding: 5px 5px 6px 9px;
    display: block;
    background: url(../images/bgDots.gif) repeat-x left top;
}
#categories a:hover {
    background: #fdf4f4 url(../images/bgDots.gif) repeat-x left top;
    color: #d32e31;
}
#categories .category-subs-selected {
    cursor: default;
    color: #d32e31;
}
/* Specific IE hack to display sub nav as inline elements*/
#categories li {
    display: inline;
}
* html #categories a {
    height: 1px;
}
/* Specific IE hack to display sub nav as inline elements*/
#main {
    position: relative;
    float: left;
    width: 670px;
    padding: 0 0 80px 0;
}
#indexHomeBody #main {
    width: 697px;
    padding: 0;
}
#footer {
    clear: both;
    position: relative;
    color: #999;
    padding: 8px 0;
}

</style>
    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
  </head>
  <body id="indexHomeBody">
    <div id="wrapper">
      <div class="hide">
        <a href="#main">Skip navigation</a>
      </div>
      <div id="header">
        <!-- end header -->
      </div>
      <div id="bodyWrapper" class="clearfix">
        <div id="body">
          <div id="left">
            <!--// bof: categories //-->
            <div id="categories">
              <ul>
                <li>
                  <a class="category-links" href=
                  "index.php?main_page=products_new">New in</a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=65">Dresses</a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=1">Hardware-></a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=2">Software-></a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=3">DVD Movies-></a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=21">Gift
                  Certificates</a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=22">Big Linked</a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=23">Test Examples</a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=28">Test 10%</a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=25">Test 10% by
                  Attrib</a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=24">Free Call Stuff</a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=33">A Top Level
                  Cat-></a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=48">Sale
                  Percentage-></a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=49">Sale
                  Deduction-></a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=50">Sale New
                  Price-></a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=53">Big Unlinked</a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=54">New v1.2-></a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=62">Music</a>
                </li>
                <li>
                  <a class="category-top" href=
                  "index.php?main_page=index&cPath=64">Mixed Product
                  Types</a>
                </li>
              </ul>
            </div><!--// eof: categories //--><!-- end #left -->
          </div>
          <div id="main">
            <div class="centerColumn" id="indexDefault">
              Main content area
            </div>
          </div><!-- end #main -->
        </div><!-- end #body -->
      </div><!-- end #bodyWrapper -->
    </div>
    <div id="footer">
      <p class="footerMain">
        <a href="">Home</a> ��|�
      </p>
      <p>
        More links
      </p>
    </div><!-- end #footer -->
  </body>
</html>