Footer to stay at the bottom

damasta

I have a footer. I was wondering if it is possible to have it always at the bottom. I hope my question is clear. But here is an example: http://jimmyjazz.homeip.net:808/listenwavy/
If you make the browser window small, you can see the footer goes on top of the body. I'd like for it to always remain below the body and at bottom of the page. How can that be accomplished? Thanks.
FYI, not my site by the way.

bpat1434

The site is 100% CSS (Thank god!!) and they use this footer code:

#footer{
	position: absolute;
	bottom:1px;
	left:0;
	background: transparent url('footer2.jpg') repeat-x  top left ;
	width: 100%;
	height:56px;
}
#footerinsert{
	background: transparent url('footer1.jpg') no-repeat  top left ;
	width:auto;
	height:57px;
}
#footertext{
	padding-top:35px;
	padding-left:130px;
	color:#dee2e6;
	font-size: xx-small;
}

And it's used in this way:

<div id='footer'>
<div id='footerinsert'>
<div id='footertext'>This site was made with 100% open source
software in <a href="http://ubuntu.com/">UBUNTU Linux</a>.</div>
</div>
</div>

The code to keep the footer at the bottom is this:

#footer{
	position: absolute;
	bottom:1px;
}

~Brett

damasta

Okay, it works properly in Firefox but not in IE as evident here: http://www.geocities.com/bdptcob/ss.JPG. Any idea how to workaround IE's incompetence?

bpat1434

Yeah... lemme think...

~Brett

bpat1434

What does your code look like? No matter what I do, I can't get the footer to move up like you do. It's absolutely positioned, so it shouldn't matter which browser you use.

~Brett

bpat1434

And I was wrong!!! 😉

So to keep it at the bottom, you need to use the "fixed" position, not absolute. But unfortunately IE doesn't support the fixed position. 🙁

So the work around is to hide the "fixed" position declaration with a small hack, and in IE just leave it absolutely positioned and put it below everything else (like z-index: 1).