How to put a footer?

Hi,
How do you put a footer on a page and make it stay at the end of the page?

You want to Google the phrase “sticky footer.”

http://www.google.com/search?client=opera&rls=en&q=css+sticky+footer&sourceid=opera&ie=utf-8&oe=utf-8

Eric Watson’s layout with a sticky footer

Paul O’Brien’s sticky footer

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.

That is called a sticky footer :).
http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm

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, :slight_smile:
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! :slight_smile: