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=http://www.webdeveloper.com/forum/archive/index.php/"index.php">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"demo.php">demo</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"demo.php">demo</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"demo.php">demo</a>
</div>
<div class="stat">
<p>USER: </p>
<p>USER: </p>
<p>USER: </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
?>Can you give the complete document; there is a bit missing at the bottom.I always use a clearing tag for my footer..
basically
#clearing { clear: both; }
that clears all divisions basically and places that portion after the last division tag, unless of course you use a wrapper which it seems you do not.
Just place that division above the footer div and it should work.
Hope that helps,
J
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=http://www.webdeveloper.com/forum/archive/index.php/"index.php">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"demo.php">demo</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"demo.php">demo</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"demo.php">demo</a>
</div>
<div class="stat">
<p>USER: </p>
<p>USER: </p>
<p>USER: </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
?>Can you give the complete document; there is a bit missing at the bottom.I always use a clearing tag for my footer..
basically
#clearing { clear: both; }
that clears all divisions basically and places that portion after the last division tag, unless of course you use a wrapper which it seems you do not.
Just place that division above the footer div and it should work.
Hope that helps,
J