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 Unsubscribed User
Unsubscribed User
8,167 Points

Footer Issues

This is probably a bad question but here goes...

I'm having trouble keeping my footer at the very bottom of the page.

Currently the page is separately horizontally with two 50% div's. Each are set to inline-block and floated left.

I understand because they are both floated the footer is coming up but I cannot figure out a solution. I've looked at the following website to fix it but either I'm doing it wrong or it isn't working. http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Any thoughts??

Thanks, JL

2 Answers

Matthew McCulloch
Matthew McCulloch
5,341 Points

Have you included a clear fix after the floated elements? If not google "clearfix" and take a look at that to see if it solves your problem. Floating elements disrupts the normal content flow of the document, the solution is to have an element after the floated elements with the css style "clear: both". This restores the normal flow of the document so that any styling afterwards will behave according to the normal document model. There is a video on treehouse in the CSS section that goes over an elegant solution to this by using content insertion with the :after selector.

I've seen instances where floated elements had collateral effects on layout elements further down the page, getting in the habit of clearfixing them seems to have taken care of this.

Unsubscribed User
Unsubscribed User
8,167 Points
Unsubscribed User
Unsubscribed User
8,167 Points

Oh man I should have set the footer to clear:both! Thanks a ton Matthew