Making a footer stick to the bottom

bob_visualefx · 05-25-2006, 08:20 AM

Hi All,
I'm trying to get CSS to make my footer stick to the bottom of the page. I've found some CSS help online and have been testing it, but it seems to be just sticking to the bottom of the browser window and not the page. At least in some browsers. Some it works fine, others it doesn't. Here is the page: LINK Any advice? Any help would be great. Thanks!

stscac · 05-25-2006, 10:59 AM

Code:

#footer {
position:fixed;
}

That should do the trick.

-Steve

bob_visualefx · 05-25-2006, 11:26 AM

Hmm, I tried that but it seems to just make it stick to the bottom of the window and not the content.

stscac · 05-25-2006, 03:06 PM

My impression is that you wanted it to stick to the bottom of the window, much like that of Script.aculo.us. In this case you are going to want to make your footer div relative to where it is in the page. You would set your css up like this.

Code:

#footer {
position:relative;
//other characteristics from css can go here
}

Hope that helps.

-Steve

bob_visualefx · 05-26-2006, 07:35 AM

I got it going with a clear:both attribute. Thanks for your advice. I appreciate it.

05-25-2006, 08:20 AM	THREAD STARTER #1 (permalink)
bob_visualefx New Member Join Date: Mar 2006 Posts: 22	Making a footer stick to the bottom Hi All, I'm trying to get CSS to make my footer stick to the bottom of the page. I've found some CSS help online and have been testing it, but it seems to be just sticking to the bottom of the browser window and not the page. At least in some browsers. Some it works fine, others it doesn't. Here is the page: LINK Any advice? Any help would be great. Thanks! __________________ -Bob

05-25-2006, 10:59 AM	#2 (permalink)
stscac A Wealth of Knowledge Join Date: Aug 2004 Posts: 3,809	Code: #footer { position:fixed; } That should do the trick. -Steve

05-25-2006, 11:26 AM	THREAD STARTER #3 (permalink)
bob_visualefx New Member Join Date: Mar 2006 Posts: 22	Hmm, I tried that but it seems to just make it stick to the bottom of the window and not the content. __________________ -Bob

05-25-2006, 03:06 PM	#4 (permalink)
stscac A Wealth of Knowledge Join Date: Aug 2004 Posts: 3,809	My impression is that you wanted it to stick to the bottom of the window, much like that of Script.aculo.us. In this case you are going to want to make your footer div relative to where it is in the page. You would set your css up like this. Code: #footer { position:relative; //other characteristics from css can go here } Hope that helps. -Steve

05-26-2006, 07:35 AM	THREAD STARTER #5 (permalink)
bob_visualefx New Member Join Date: Mar 2006 Posts: 22	I got it going with a clear:both attribute. Thanks for your advice. I appreciate it. __________________ -Bob

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)