Footer Problem

[hovan]

I am starting to design a new template for my site and I am starting off by getting the basic layout done, but I ran into a problem with the footer. I have a 2 column layout- the menu is on the left and the main body is on the right, but for some reason the footer does not line up at the bottom of the page. Instead it lines up in at the bottom of the main body. This happens both in Firefox and Opera, but in Internet Explorer it lines up at the bottom, but the site is not centered (i used a fixed width). I am not an expert at html and css, so the problem is most likely in how I set my div tags and I was wondering if you could help me fix it. Heres the layout:

<div id="container">
<div id="header">
<div id="head">
</div>
<div id="headtool">
  <?php if (mosCountModules('user9')>0) mosLoadModules('user9',-2); ?>
</div>
</div>
<div id="main">
  <div id="leftcol">
    <?php if (mosCountModules('left')>0) mosLoadModules('left',-2); ?>
  </div>
	<div id="content">
  <?php mosMainBody(); ?>
  &nbsp;
  </div>
</div>
<div id="footer">
  <?php include_once('includes/footer.php'); ?>
</div>
</div>

And here is the layout in the CSS:

/* ######################  LAYOUT SETTINGS       ############################## */
#container{width:800px; background-color:#CCCCCC; margin: auto;}
#header {width:800px; height:150px; background-color:#000033;}
#head {width:800px; height:100px;}
#headtool {width:auto; height:50px; background-color:#331234}
#main {width:800px; background-color:#FFFFFF;}
#leftcol {width: 150px; background-color:#FF0000; float:left;}
#content {width: 650px; background-color:#FFFFFF; float:right;}
#footer {width:800px; height:15px; background-color:#FFFFFF;
	padding: 10px 0}

/* ######################  LAYOUT SETTINGS       ############################## */