I'm having a strange problem that is throwing me off.

Here is my basic layout:
HTML Code:
<body>
<div id="header"> header </div>
<!-- end div:header-->
<div id="main">
  <div class="content">
    <div id="leftCol"> leftCol </div><!--end div:leftCol-->
    <div id="rightCol"> rightCol </div> <!--end div:rightCol-->
    <div class="clear" /><!-- end div:clear-->
  </div> <!--end div:content-->
</div><!-- end div:main-->
<div id="footer"> footer </div><!-- end div:footer-->
</body>
When things were not working well with my CSS, I decided to see what was going on inside FireBug...and something is completely screwed up. My above code renders out with the Footer INSIDE the "main" div!

HTML Code:
<div id="footer"> footer </div><!-- end div:footer-->
</div><!-- end div:main-->
</body>
I even went as far as removing ALL CSS, and that does not help at all. FireBug still renders the footer inside the main div.