tags:

views:

732

answers:

3

Hello, I'm trying to make the footer stay at the bottom using CSS, - sticky footer:

.wrapper {
  margin: 0 auto;
  padding: 0 0 0 0;
  width: 100%;
  text-align: left;
  background: #F5F5FF;
}

.page .footer {
  left: 0;
  width: 100%;
  min-width: 300px;
  position: fixed;
  margin-top: -150px;
}

.tfoot {
  background: #3E5C92;
  color: #E0E0F6;
}

.smallfont {
  font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

And here's the HTML of the thing:

<div class="wrapper">My stuff</div>
<div class="footer">
<div class="tfoot" align="left" style="padding:6px">
<div class="smallfont" style="float:right">
<a href="?app=about">About Extranet</a>&nbsp;<a href="?app=changelog">Changelog</a>&nbsp;</div>
<div style="color:white">
<small>Copyright &copy; 2009 Radon Systems&nbsp;|&nbsp;Shamil Nunhuck&nbsp;|&nbsp;<?php echo($product.'&nbsp;|&nbsp;'.$version.'&nbsp;|&nbsp;'.$build); ?>
</div></div></small></div>

But it's not sticking to the bottom, at all. What's wrong with it?

+1  A: 

You do not have bottom: set.

Dup: http://stackoverflow.com/questions/193634/html-footer-problem

jfar
nope, that didn't fix it :(
Shamil
+6  A: 

Try this method (its the only one I've found consistently works):

http://www.cssstickyfooter.com/

jrista
nor did that :|
Shamil
You have to implement it EXACTLY how it says. Its not a pick and choose sort of thing. If you design your outer page structure to exactly follow that method, it will work.
jrista
Currently rewriting the CSS file and restructuring it.
Shamil
+2  A: 

if you want for example .footer to stick to bottom try the following :

.footer { position:fixed; bottom:0; width:100%; height:110px;}

of course i made the width and height up so change as you require.

Hope this helps

Ali
YES! thank you very much!
Shamil
Be ware that this will force the footer to "float" above any other document content. If you want the footer to stick the to bottom except when the document content is longer than the visible window height, this won't work. This will also not work in IE6.
jrista