Footer doesn't get placed correctly

I have the following (simplified) code:

.header {
width:750px;
margin-left:auto;
margin-right:auto;
margin-bottom:15px;
padding:3px;
}

.footer {
font-size:11px;
margin-top:8px;
vertical-align:bottom;
text-align:center;
}

.contentWrapper {
width:780px;
margin-left:auto;
margin-right:auto;
min-height:675px;
height:auto;
padding-top:2px;
}

/* for Internet Explorer */
/*\*/
* html .contentWrapper {
height:675px;
}

.content {
width:768px;
text-align:left;
position:relative;
float:left;
padding:4px 2px 2px 6px;
}

Code (css):

<div class="header">header</div>
<div class="contentWrapper"><div class="content">hello</div></div>
<div class="footer">footer</div>

Code (markup):

When I put some text on the place of "hello", it will be displayed correctly.
Screenshot: http://img170.imagevenue.com/img.php?image=42234_correct_122_649lo.JPG

The problem occurs when I place lots of text there. The footer doesn't get pressed to the bottom but floats halfway.
Screenshot: http://img138.imagevenue.com/img.php?image=42236_incorrect_122_732lo.JPG

I want the footer to be at the bottom at all times. How can I do this?
The problem occurs in Firefox, Opera, Safari but not in IE .

 

Set its width to match the content wrapper or close to it and put clear:both;
That should fix it.

 

That works. So much frustration.... ...so easy to solve.
Thank you very much!!