View Full Version : left <div> won't reach footer

11-12-2011, 08:40 AM
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 <div> 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.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<meta content="en-us" http-equiv="Content-Language" />
<meta content="saint,sainthood " />
<link href="style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />


<div id="header">

<h2>Home Page</h2>

<?php include("includes/pix_include.php"); ?>


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

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


<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%">
<td style="width: 30%"></td>
<td><img alt="Example" src="images/Example.jpg" width="328" height="512" /></td>
<td style="width: 30%"></td>


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


margin-top: 0px;
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 */

11-12-2011, 09:19 AM
Hello okrobie,
We'll need the rest of the CSS to see what you're building.

There are a few methods for making an equal height layout, here is a demo (http://nopeople.com/CSS%20tips/fluid_width/index.html) of mine that works very well.

And another showing the Faux Columns method (http://nopeople.com/CSS%20tips/faux_columns/index.html). You can google that for a lot more examples.

And a jquery method here (http://nopeople.com/CSS%20tips/jQuery_equal_columns/index.html).

11-12-2011, 01:17 PM
Thanks Excavator and Frankie. I posted this question at the wrong time unfortunately because I'm going out of town. I'll follow up when I get back. Thanks again.

11-18-2011, 06:53 AM
Hi Excavator and Frankie, I'm back from my trip and I studied your example very carefully Excavator, and learned enough from it to fix my site. Thank you very much.