...

View Full Version : Problem with CSS footer



elmu
08-25-2005, 02:40 PM
Hello,

I have a problem with CSS footer on my page.
See my base code below. If I set the footercontainer position:relative than it works if the centercontent is big enough. If I set it to absolute than it works if the centercontent is small.
How can I put the footer always at the end of the page?

Thanks for your help!



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#bannercontainer {
width:901px;
height:100px;
background:#fff ;
border-bottom:1px solid #000;
border-right:1px solid #aaa;
}

#maincontainer {
width:901px;
background:#fff;
}

#banner {
background:#147;
width:800px;
height:100px;
float:left;
}

#leftcontainer {
position: absolute;
left:0;
top:101;
width:125;
background:#eee;
}

#centercontent {
background:#fff;
margin-left: 127px;
margin-right:127px;
margin-top:0px;
padding-left:10px;
padding-right:10px;
padding-top:20px;
width:650px;
}

#footercontainer {
position:relative;
bottom: 0px;
width:901px;
height:15px;
background:#567;
color: #ddd;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
font-weight: normal;
padding-top: 5px;
margin-top:50px;
}

body {margin:0px 0px 0px 0px; padding:0px; }
.menu {background-color:#eee; border-right:1px solid #aaa; border-bottom:1px solid #aaa; padding-top:20px; }
.menu a { width:120px; height:20px; line-height:20px; background-color:#eee; display:block; color:#000; }
.stat { width:125px; height:120px; background-color:#eee; }
.login { width:125px; height:180px; background-color:#eee; }

</style>

</head>
<body>


<div id="bannercontainer">
<div id="banner"></div>
</div>

<div id="maincontainer">

<div id="leftcontainer">
<div class="menu">
<a id="top" href="index.php">Home</a>
<a href="demo.php">demo</a>
<a href="demo.php">demo</a>
<a href="demo.php">demo</a>
</div>

<div class="stat">
<p>USER:&nbsp;&nbsp; </p>
<p>USER:&nbsp;&nbsp; </p>
<p>USER:&nbsp;&nbsp; </p>
</div>
<div class="login">login</div>
</div>
<div id="centercontent">
<table>
<tr><td><br>Generated by PHP<br></td></tr>
<tr><td><br>Generated by PHP<br></td></tr>
<tr><td><br>Generated by PHP<br></td></tr>
<tr><td><br>Generated by PHP<br></td></tr>
</table>
</div>

<div id="footercontainer">Demo footer</div>

<?php

?>

Tristan Gray
08-25-2005, 03:12 PM
Don't use absolute positioning for your left and center columns.

Try something like

#leftcolumn {
float: left;
width: whatever;
margin: whatever;
border: whatever;
}

#centercolumn {
float: left;
width: whatever;
margin-right: whatever;
}

#footer {
clear: both;
width: whatever;
}

This way the footer element will always be at the bottom of where your content element is regardless of how much content is in it. You may want to float things differently to make it look how you want but this is what I would do.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum