Anyone know why this div isn't stretching?

The div in my code with class “bottom” should stretching to the height of the browser window, but it’s not working. Anyone have any idea why? Below is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Travel Solutions Leisure Travel Services</title>
<link href="styles.css" rel="stylesheet" type="text/css" />

<table width="959" border="0" align="center" cellpadding="0" cellspacing="0" class="container">
        <td align="center" valign="top" class="middlecolumn"><img src="images/main_banner.jpg" alt="Travel Solutions Leisure Travel Services" width="955" height="240" border="0" /><table width="100%" border="0" cellspacing="0" cellpadding="0">
    <td align="center" valign="top"><div class="content">Test text</div><div class="bottom"></div></td>


@charset "utf-8";
/* CSS Document */

body, html {margin:0px; padding:0px; height:100%; background:url(images/main_bkgrnd.jpg) no-repeat top center;}

.container {height:100%;}

.middlecolumn {height:100%; border-right:solid 1px #77b5c7; border-left:solid 1px #77b5c7;}

.content {height:auto; min-height:43px; padding:20px; background:url(images/red_bar_bkgrnd.jpg) repeat-x #f5f5f5; text-align:left;}

.bottom {background:url(images/bottom_bkgrnd.jpg) repeat-x left top #ab0202; height:100%; padding:20px;}

The page can also be viewed here. Thanks!