Hey guys...

Here is the code to a page I'm developing. I have links at the bottom of the content on every page...basically just duplicate links which can be found elsewhere on the site.

My problem with this particular page is that there isn't going to be a whole lot of content on this page, and those links like the rest of the pages are staying just directly below the content. The site has 100% height so I would like the links to stay at the bottom of the page, not just below the content. All of my other pages do no have this problem as there is enough content to fill up the page. Here is my code:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Natural Choices</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body, html {
height: 100%;
}
body {
margin: 0;
background: #ffffff;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12px;
text-align: center;
}
#container {
_height: 100%;
min-height: 100%;
margin: auto;
width: 750px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background:   url(images/containerbg.jpg) repeat-y left top;
text-align: left;
position: relative;
}
#navbar {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background: #ffffff;
height: 16px;
padding-left: 25px;
}
ul#nav li {
text-align: center;
}
ul#nav li ul li {
text-align: left;
}
ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
position: relative; /*for ie to show borders */
}
li { /* all list items */
float: left;
position: relative;
width: 11em;
background: #ffffff;
height: 16px;
}
li ul { /* second-level lists */
display: none;
position: absolute;
left: -5px;
top: 100%;
background: #ffffcc;
padding-left: 0px;
}
li ul a {
background-color: #99cc99;
color: #000000;
text-decoration: none;
float: left;
margin: 0;
width: 140px;
padding-left: 0px;
border-top: 1px solid #cccccc;
}
li ul a:hover {
background-color: #99cc99;
color: #ffffff;
}
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
top: auto;
left: auto;
margin-left: -1px;
}
li:hover ul, li.over ul { /* lists nested under hovered list items */
display: block;
}
li a {
text-decoration: none;
display: block;
color: #000000;
height: 16px;
}
li a:hover {
color: #3333ff;
height: 16px;
}
#content {
margin-left: 100px;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 5px;
clear: left;
}
.cart a {
text-decoration: none;
color: #3333ff;
}
.cart a:hover {
text-decoration: underline;
}
#firstp {
margin-bottom: 20px;
margin-top: 10px;
}
table {
border: solid #99cc99; /*do the left and top borders only*/
border-width: 1px 0 0 1px;
margin-bottom: 5px;
}
table td {
border: solid #99cc99; /*right and bottom borders only to close up the table*/
border-width: 0 1px 1px 0;
}
#links {
font-size: 9px;
text-align: center;
margin-bottom: 5px;
}
#links a {
text-decoration: none;
color: #3333ff;
}
#links a:hover {
text-decoration: underline;
}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
	if (document.all&&document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;

//--><!]]></script>
</head>

<body>
<div id="container"> 
  <div id="header"> <img src="images/naturalchoicesheader.jpg" /> </div>
  <div id="navbar"> 
    <ul id="nav">
      <li><a href="index.php">Home</a></li>
      <li><a href="">Health Products</a> 
        <ul>
          <li><a href="cleansingp.php">&nbsp;Cleansing Products</a></li>
          <li><a href="personalhc.php">&nbsp;Personal Health Care</a></li>
          <li><a href="skincare.php">&nbsp;Skin Care</a></li>
          <li><a href="cosmetics.php">&nbsp;Cosmetics</a></li>
        </ul>
      </li>
      <li><a href="">Health Testing</a> 
        <ul>
          <li><a href="bloodanalysis.php">&nbsp;Blood Analysis</a></li>
          <li><a href="othertests.php">&nbsp;Other Tests</a></li>
        </ul>
      </li>
      <li><a href="eegneuro.php">EEG Neurofeedback</a></li>
      <li><a href="requestinfo.php">Request Info</a></li>
    </ul>
  </div>
  <div id="content"> <span class="cart"><img src="images/cart.gif" />&nbsp;<a href="cart.php">View 
    Cart</a></span> 
    <div id="firstp"> 
	<strong>Cosmetics</strong><br />
      <table class="tablecontent" width="640" cellspacing="0" cellpadding="1">
        <tr> 
          <td width="116" bgcolor="#ffffff">Product Code</td>
          <td width="253" bgcolor="#ffffff">Description</td>
          <td width="99" bgcolor="#ffffff">Retail Price</td>
          <td width="159">&nbsp;</td>
        </tr>
		<tr> 
          <td>9963</td>
          <td>Cosmetic Kit - Cool</td>
          <td>$200.40</td>
          <td>&nbsp;</td>
        </tr>
		<tr> 
          <td>9964</td>
          <td>Cosmetic Kit - Warm</td>
          <td>$200.40</td>
          <td>&nbsp;</td>
        </tr>
      </table>
      <p>Each kit contains 2 shades of Foundation, 1 Blush (2 colors), 1 Eye Pencil, 1 Eye Shadow (4 colors), 1 Mascara, 4 Lipsticks, 1 Lip Pencil, 4 Nail Enamels, 1 Create A Masterpiece Brochureand the Cosmetics Finishing Touch Video. </p>
    </div>
    <div id="links"> <a href="index.php">Home</a> | <a href="cleansingp.php">Cleansing 
      Products</a> | <a href="personalhc.php">Personal Health Care</a> | <a href="skincare.php">Skin 
      Care</a> | <a href="cosmetics.php">Cosmetics</a> | <a href="misc.php">Misc.</a> 
      | <a href="bloodanalysis.php">Blood Analysis</a> | <a href="othertests.php">Other 
      Tests</a> <br />
      <a href="eegneuro.php">EEG Neurofeedback</a> | <a href="requestinfo.php">Request 
      Information</a> </div>
  </div>
</div>
</body>
</html>