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

CSS

Posted by Tomy Lim
Tomy Lim
4,571 Points

How do I make my footer stick to the bottom of the page?

There's a white space underneath my footer. How do I stick my footer to the bottom. Also, my footer doesn't extend 100% to left and right.

EDIT: Look at what i did to your code below to achieve the highlights . Also check out this post to understand more -Aurelian

3 Answers

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hi, to make it stick , you need to use position fixed.

If you need more information one any help to show you, ill certainly paste some code :)

If your footer don't extend , there may be cople of reasons . Paste your code as it would help us to figure it out .

Hope it helps.

Tomy Lim
Tomy Lim
4,571 Points

html section: <footer> <a href="https://twitter.com/t518961"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Tomy Vichrak Lim.</p> <p>Available for Hire</p> <p><s>Not Available</s></p> </footer>

css section:

footer {
  font-size: 0.75em;
  clear: both;
  padding: 25px 0px;
  color: #ccc;
  text-align: center;
}
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hi, well depends on the page i guess . I would say to add 

position:fixed;
bottom:0;

see if this works . And if doesnt , post your HTML and CSS so i can have a better look on it.

Tomy Lim
Tomy Lim
4,571 Points

footer { font-size: 0.75em; clear: both; padding: 25px 0px; color: #ccc; text-align: center; position:fixed; bottom:0; background: #696969; width: 100%; }

It worked :D. But, now there's an empty white space on the left of it.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Can you post a screenshot ?

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

What do you mean theres a white space in the left of it? of what ?

codepen.io

Poste all code there if thats possible and i could see it better : p

Tomy Lim
Tomy Lim
4,571 Points

http://codepen.io/anon/pen/qEEwqV

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

You mean this? http://codepen.io/anon/pen/jEERyE

What are you trying to do ? Like you want you footer how ? give me more information as I'm a little bit confused.

Andrew Chappell
Andrew Chappell
12,782 Points
Andrew Chappell
Andrew Chappell
12,782 Points

Position fixed will make it stick to the bottom even while it scrolls. If you just want to get rid of the white space there are some well documented solutions.

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Bootstrap and Compass also offer solutions.

The major caveat is you need to define a fixed height for this to work. So it's not ideal if you need a flexible content area in the footer.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

As far as i understood he wanted his footer to stick to the bottom : p or it depends what he have in mind

Andrew Chappell
Andrew Chappell
12,782 Points
Andrew Chappell
Andrew Chappell
12,782 Points

http://codepen.io/anon/pen/gbbNbW

For some reason the browser was setting an 8px margin on the body element. That explains the white space either side of the footer. I used the example that I posted above from Ryan Fait.