...

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



okrobie
11-12-2011, 07: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.



<!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 */
}

Excavator
11-12-2011, 08: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).

okrobie
11-12-2011, 12: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.

okrobie
11-18-2011, 05: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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum