Hi,
How do you put a footer on a page and make it stay at the end of the page?
I looked at Paul’s post about footers here in the css faq. I tried the same code.
its ok but the problem is that the footer comes up as the content is decreased. i want the footer to stay at end of page no matter how short the content is.
im trying to put the same code but it is having a real wierd result :o
seems like i’ll have to adjust a lot of things for it. lol.
Please tell me what im doing wrong! the footer doesnt seem to want to follow my instructions.
css code
html, body {
height:100%;/* needed to base 100% height on something known*/
text-align:center;
}
#outer {
width:950px;
min-height:100%;
margin-top:-37px;/*footer height - this drags the outer 40px up through the top of the monitor */
}
/* this bar comes at the top of page*/
.blackbar top{
font-size:.9em;
background:#000;
overflow:hidden;
height:2em;
border-top:37px solid black;
}
#footer {
width:100%;
margin:auto;
height:37px;
background:url(../images/centerfooter.gif) center repeat-x;
clear:both;
}
html code
here s the html
html code
<body>
<div class="container">
<div id="outer">
<div class="blackbar">
<ul>
<li><a href="">Contact Us</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Sign-In</a></li>
<li class="last"><a href="">Help</a></li>
</ul>
<input type="text" id="search" name="search bar" value="search" class="search">
<img src="images/im.png" class="searchimg">
</div>
<div id="clearfooter"></div>
</div>
<div id="footer">
<ul>
<li><a href="">Privacy policy</a></li>
<li><a href="">Cntact Us</a></li>
<li class="last"><a href="">About Web Focus</a></li>
</ul>
<span class="rightfooter"></span>
</div>
</div>
</body>
Please tell me what im doing wrong! the footer doesnt seem to want to follow my instructions.
Hi mistaya123,
What you are doing wrong is nesting your #outer div in that #container div. Just do away with that #container div altogether.
The element with min-height:100% (#outer) must be the direct child of the body element which has height:100%;
You also need to get the IE8 & Opera min-height:100% bug fixes in place.
See this article for a complete explanation of how it all works. Sticky Footers - A Sticky Subject!
The display:table is no longer needed in a CC for IE8, that bug is taken care of with the pseudo #outer:after block (see the code below for the comments)
Here is your code with the sticky footer working now.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Sticky Footer</title>
<style type="text/css">
html, body {
height:100%;/* needed to base 100% height on something known*/
margin:0;
padding:0;
}
/*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/
body:before {/*Opera min-height 100% Fix (Maleika)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/*eliminate need for inner non clearing element (Erik.J)*/
}
#outer:after, /* #wrapper:after for IE8 min-height:100% Fix*/
#content:after { /* #content:after for Float Containment*/
clear:both;
content:"";
display:block;
height:1%;/*fix IE8 min-height:100% bug (Erik.J)*/
font-size:0;
}
#outer {
width:950px;
min-height:100%;
margin:-37px auto 0;/*footer height - this drags the outer 40px up through the top of the monitor */
background:#CDF;
}
* html #outer{height:100%}/*IE6 min-height*/
/* this bar comes at the top of page*/
.blackbar{
font-size:.9em;
background:#000;
overflow:hidden;
height:2em;
border-top:37px solid black;/*soak up negative top margin on #outer*/
text-align:right;
}
#content{
padding:10px;
background:#DDF;
}
ul,li,li a{/*=== Temporary UL Styles ===*/
margin:0;
padding:0;
list-style:none;
float:left;
color:#fff;
}
#footer {
width:100%;
margin:auto;
height:37px;
background:#000 url(../images/centerfooter.gif) center repeat-x;
color:#FFF;
}
.rightfooter{float:right;}
</style>
</head>
<body>
<div id="outer">
<div class="blackbar">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Sign-In</a></li>
<li class="last"><a href="#">Help</a></li>
</ul>
<input type="text" id="search" name="search bar" value="search" class="search">
<img src="images/im.png" class="searchimg">
</div>
<div id="content">
<p>Test text here Test text here Test text here Test text here.</p>
<p>Test text here Test text here Test text here Test text here.</p>
<p>Test text here Test text here Test text here Test text here.</p>
<p>Test text here Test text here Test text here Test text here.</p>
</div><!--end content-->
</div><!--end outer-->
<div id="footer">
<ul>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Cntact Us</a></li>
<li class="last"><a href="#">About Web Focus</a></li>
</ul>
<span class="rightfooter">Right Footer Span</span>
</div>
</body>
</html>
Thanx! got it done at last. everything in its place and the world at peace!