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:
HTML
<!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">
<head>
<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" />
</head>
<body>
<table width="959" border="0" align="center" cellpadding="0" cellspacing="0" class="container">
<tr>
<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">
<tr>
<td align="center" valign="top"><div class="content">Test text</div><div class="bottom"></div></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
CSS
@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!