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 Spen Taylor
Spen Taylor
13,027 Points

Footers - down boy!

I spent half of yesterday trying to nail down my footer to the bottom of the page. Would be easy enough by just marking the div element up underneath the rest of the page in the HTML, but I want the footer to anchor to the bottom of the browser even if the page's content is a bit thin.

Anybody have any insight on this?

I've tried a whole bunch of work arounds and they don't seem to work, usually the footer attaches to the bottom of the view, but then as you scroll down it moves with the page.

5 Answers

Philipp Antar
Philipp Antar
7,216 Points

like so?. I also made a real HTML file with a long sample text and the divs always stay at the top or bottom, no matter how I scroll. I can email it to you, if you like.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Spen Taylor - You might enjoy checking out learnlayout.com, it's by far the best tutorial on positioning I've ever seen.

Rick Yentzer
Rick Yentzer
5,885 Points
Rick Yentzer
Rick Yentzer
5,885 Points

Try this. http://ryanfait.com/sticky-footer/

Spen Taylor
Spen Taylor
13,027 Points
Spen Taylor
Spen Taylor
13,027 Points

Hi Ryan, thought I'd replied but must have left the page without hitting the reply button! bah!

Thanks for the linkage :)

I've managed to set up a little test page and have it working fine there, but the page I'm trying to apply it too is built with PHP, so I guess it's just a case of getting my head around the final outputted HTML from the various 'includes'.

I'll get there eventually!

Spen Taylor
Spen Taylor
13,027 Points
Spen Taylor
Spen Taylor
13,027 Points

I think a fixed footer would stay at the bottom of the browser view rather than the bottom of the page (after all content).

I did get there in the end, the key was to set a container(a) holding all of the page content (within another container(b)) and the footer, then setting the footer to 0px from the bottom of the overall container (a) with absolute positioning. I set the the html & body to 100% and the overall container (a) to a min-height of 100%

works a treat from what I can tell :)