CSS: How to make a footer which really stays on the bottom

March 30, 2008 in css

One problem Jonathan Longnecker run into pretty frequently when coding a site in to XHTML and CSS is making his footer dock to the bottom of the screen. It’s especially annoying if you have a page that’s short on content and the footer, which happens to be a different color that the body background doesn’t stay at the bottom of the browser window:

I can hear you say, “But why don’t you just do a fixed position on it. That’s easy enough.” True, but if you do that then it’s always at the bottom of the screen no matter how tall the window is. So if I have a page with a lot of content that footer shouldn’t show up until the content is done. How do we fix this? Let me show you. Here’s what the problem looks like:

Footer is broken

This tutorial assumes a few things: 1. That you know basic HTML formatting, and 2. That you have a pretty good understanding of CSS.

Please also consider to check out another method called sticky footer.

Link: http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/

Spread this KnowTe

Digg Del.icio.us Stumble Facebook Float Technorati Bump

Whatever you want to say!

Leave a Comment »

House Music
Mar 22, 2010
No: 7 / ID: 5873

Thanks for the article, helpful to me.

Richard
Dec 09, 2009
No: 6 / ID: 5333

Hey I have one on Digitalmarketechs.com but its not as cool as yours.!! nice footer bar!! sem

Schalk
Nov 27, 2009
No: 5 / ID: 5280

That’s what I am looking for… How do you get the footer bar on your page with twitter etc. Did you design from scratch or is there a plugin?

Thanks

Knowtebook
Oct 27, 2009
No: 4 / ID: 5133

hey. check out http://www.wibiya.com/

Amaresh Das
Oct 25, 2009
No: 3 / ID: 5117

HI ,

I want to make a footer like your site footer,

I mean in bottom, you have made one toolbar like, where search, recept post, random post, twitter and so on …

I want made it like it ..

will you guide me how to make it ?

Please mail me :amareshchandradas2005@gmail.com

brindes
May 28, 2009
No: 2 / ID: 4320

Hi.
I don’t have a “pretty good understanding” of CSS. Is this kind of knowledge required for the other option (Sticky Footer) too ?

Thanks.

Or search by time

Subscribe to KnowTeBook

LovedKnowTes

-->

Recommendation

Community Links

Color Calculator
A free design tool to help people find color harmonies and schemes in RGB, CMYK, and HTML
Free Photography Exposure Tool
A tool to help digital and film photographers find the right EV for a variety of lighting conditions in ISO’s from 50-3200
20 Must Learn Button Tutorials in jQuery and CSS
This is a compilation of some of the helpful tutorials that can teach you on how to use jQuery in improve and creating special effects for the buttons of your website.
5 Firefox Add-Ons For Your Web Analytics Needs
Firefox is one of the most popular browsers in the world. The secret behind this popularity is thousands of small apps available with firefox which is also free.
How Much Money Do Designers Make?
Graphic designers make different amounts of money depending on what company they work for, how successful they are and who their clients are.
Customise Your Sneakers with Artwork at Sneakart
Sneakart offers the perfect solution to the fashion conscious, artistically or budget challenged sneaker enthusiast, lasting for months or years.
Using the Puppet Warp tool in Photoshop CS5
In this tutorial we’re going to look at the Puppet Warp tool in photoshop CS5, which is both fun and extremely practical.
33 Creative and Awe-Inspiring Logo Designs
In this next post, we’ve collected 33 Creative Logo Designs that may inspire logo designers and artistic enthusiasts.
Initial Thoughts After Buying An iPad
Some initial thoughts after buying and using an iPad for a few days.
Recommended Books for a Prospective Product Designer
Here I want to recommend to you several books which you as designer may find to be of great inspiration and teach you or to improve your design education.
Defining Exposure
In this post I define what exposure is and why it’s important to photography.
web 2.0 templatesWeb 2.0 templates with simplicity, cleanliness, and elegance in design and the less number of columns and work great for all your needs and have all the great features of Web 2.0 technology.

Subscribe to RSS | Submit a Link