left <div> won't touch footer

Hello. I have a typical CSS site with a header, footer, left and center divisions. The problem is that when the center is full of content, the left section leaves a gap between it's bottom and the footer. Is there a way to make the left section go as low as the center section so that it also touches the footer? Here is the relevant code for a typical page and the related CSS. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<title>Welcome</title>
<meta content="saint,sainthood " />
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

</head>
<body>

<div id="header">

<h1>&nbsp;</h1>
<h1>Blessed</h1>
<h2>Home Page</h2>
<h3></h3>
 
<?php include("includes/pix_include.php"); ?> 
 
 </div>

<div id="left" >
<?php include("includes/nav_include.php"); ?>

<div id="facebook">
<?php include("includes/facebook.html"); ?>

</div> 
</div>

<div id="center" >

<p class="style18">Example text</p>
<p class="style18">Example text</p>
<p class="style18">1875 - 1954</p>

<table style="width: 100%">
<tr>
<td style="width: 30%"></td>
<td><img alt="Example" src="images/Example.jpg" width="328" height="512" /></td>
<td style="width: 30%"></td>
</tr>
</table>

</div>

<div id="footer">
<p class='style10'>
<a href="http://www.example.com" target="_blank" class="style13">
<span class="style14">Example text</span></a></p>
</div>

</body>
</html>



#left{ 
margin-top: 0px;
float:left;
width:150px;
background-color: #a64134; 
min-height: 670px; /* for modern browsers */
height: auto; !important; /* for modern browsers */
height:100%; /* for IE5.x and IE6 */
border-bottom-left-radius: 20px;
border-top-left-radius: 20px;

}

#facebook {
margin-top: 40px;
background-color: #a64134; 
min-height: 100px; /* for modern browsers */
height: auto; !important; /* for modern browsers */
height:100%; /* for IE5.x and IE6 */
}

[edited by: alt131 at 11:54 pm (utc) on Nov 9, 2011]
[edit reason] Thread Tidy - Examplifying [/edit]

left <div> won't touch footer

okrobie

alt131

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week