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 Ran Yehushua
Ran Yehushua
5,908 Points

Trying to apply a sticky footer to the portfolio web page we built with Nick in the first course on the Front-end Track

Has anyone successfully done this? I am trying to use the height: 100% method that Guil explains in the CSS Layout Techniques course, and I am unable to figure this out.

Is this method not working due to the floated main content (#wrapper)?

Andrew Stelmach
Andrew Stelmach
12,583 Points

I suggest setting up a Codepen for people to help you

1 Answer

Kevin Fitzhenry
Kevin Fitzhenry
30,096 Points

Ran Yehushua check out this post from CSS-Tricks: https://css-tricks.com/snippets/css/sticky-footer/

Hope this helps, if not, post your code and you'll get help quickly.

Ran Yehushua
Ran Yehushua
5,908 Points

Thank you! I ended up using this method: http://mystrd.at/modern-clean-css-sticky-footer/

However my gallery page had issues with the footer bleeding onto the bottom of the bottom row of images, I was able to correct it by adding bottom padding to the body element.

After completing both the inline-block column method and the floated column method videos in the CSS Layout Techniques course, I downloaded the project files and played around with it. The same method Guil used to achieve the sticky footer with the inline-block columns method would not work when floating columns.

Anyways, I achieved my desired effect. Thanks again!