CSS: How to make a footer which really stays on the bottom
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:

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.
Spread this KnowTe
Digg Del.icio.us Stumble Facebook Float Technorati BumpRelated KnowTes
Subscribe
If you liked this KnowTe, why not subscribe to our RSS feed?
advertising browser chat cms coding css design email fonts forms freebies google graphics hosting icons ideas inspiration iphone javascript jquery marketing mobile office pdf photos photoshop php plugins rss search engine seo stock technology templates themes tools trends tutorials usability vector wallpaper webdesign webhosting wordpress workflow
WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 7 or better.
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.
KnowTeBook.com
UserTalk
eRage website: Very nice examples! My compliments for finding these. Too bad the Nike viral is offline now. I liked...
FerdiV: Mmm this doesn’t work for me :( I changed every ‘text’ with ‘title’ for my...
The Designary: This is a good start for what I’m trying to accomplish with my navigation without using...
essay topics: Great tools! They are excellent to know what can be improve in my sites. I think that Google Anlytics...
Agatha: These wallpapers are fantastic! Congratulations guys!!!!
Friends
- Business Card Designs
- Craig Farrall’s Blog
- CSS Built
- Dezignus
- Flash Mint Design Blog
- Free Photoshop Brushes
- fudgegraphics
- Fuel Your Creativity
- Just Creative Design
- Logo designs
- My Ink Blog
- NaldzGraphics
- Onextrapixel
- Pelfusion
- Photoshop Girl Tutorials
- spidanet.de
- Tasarimini | Graphic Tools
- The most stylish websites
- Website templates
- Webtoolkit4.me
Random KnowTes
- Mobile Web Marketing - Ten Mistakes you should be aware off
- Free Photoshop Case Templates For DVD, CD and Cassette
- Free Wordpress Theme for Designer and Portfolio Websites
- SLOGANS.DE - Die Datenbank der Werbung!
- Hosting: Xdrive - kostenloser Webspeicher
- A Complete Guide to Better Email For Freelancers
- How To Promote Your Posts in 10 Minutes to 1 Mio People
- Are Comment Policies Necessary On Websites?



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.
CSS: How to make a footer which really stays on the bottom | mediaplana
Mar 30, 2008
ID: 1
[…] (more…) […]