Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Jason Larkin
Jason Larkin
13,970 Points
Posted by Jason Larkin
Jason Larkin
13,970 Points

Making a sticky footer

Does anyone have the CSS and HTML for making a footer actually stay at the bottom of a page? I have tried every tutorial on the Web and none seem to work, so does anyone have something that works for them? Thanks in advance for any replies.

5 Answers

Zette Harbour
Zette Harbour
1,891 Points
Zette Harbour
Zette Harbour
1,891 Points

I don't know if this is what you are looking for, but I just had the problem of my footer moving up into my 2 column layout.

The code I used in my main.css file is:

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}

It is the clear: both; command that keeps the footer from moving up into my 2 column layout.

Blake Hutchinson
Blake Hutchinson
21,695 Points

Yes, floated div tags can cause the footer to "come up" if the footer itself doesn't use clear: both;

Alessandra Vaughn
Alessandra Vaughn
13,915 Points
Alessandra Vaughn
Alessandra Vaughn
13,915 Points

Hello, Here are the main items you need in your css selector ...

footer { position: fixed; width: 100%; bottom: 0; z-index: 100; }

  • position at fixed is so that it doesn't move
  • width isn't 100% necessary, but this makes it span across its parent div
  • bottom 0 is so that it is at the bottom of the page (you could have "top: 0" for a sticky header)
  • z-index is so that it is always layered on the top and doesn't show behind any other content on your page

This is covered in more detail on the CSS Layout Techniques regarding positioning.

Carie Andy Tugano
Carie Andy Tugano
46 Points
Carie Andy Tugano
Carie Andy Tugano
46 Points

Hello, you can try this code

#footer {
    position: fixed;
    border: 1px solid #ccc;
    width: 99%;
    height: 100px;
    bottom: 0;
    padding: 0;
}

<div id="footer"> Footer </div>

Jason Larkin
Jason Larkin
13,970 Points
Jason Larkin
Jason Larkin
13,970 Points

Thanks to all of you for your answers, but nothing is working. I'm going to swallow my pride and ask my Web developer girlfriend how to do it and post the results and code for you, in case you ever run into a similar situation. ( I'm also using Twitter Bootstrap, which I think complicates things.)