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

Posted by Ibrahim Rodrí­guez
Ibrahim Rodrí­guez
Courses Plus Student 2,495 Points

Issue with footer tag

Hey guys, I hope you are well.

I'm just practicing some HTML5 tags and CSS3. So every time I setup a background color in the footer the whole design takes the color of the footer's background. See the link below:

http://982px.com/test001/

Probably the header and footer need to be out of the container div?

Thanks for your help in advance.

4 Answers

Matthew McCulloch
Matthew McCulloch
5,341 Points
Matthew McCulloch
Matthew McCulloch
5,341 Points

All of your child elements in the section with class="content" are floated, so the section has nothing in the normal document flow and has reduced it's height to 0px as a result. The footer is actually covering the area from the header down to the bottom of the page.

Check out "clearfix" on google and add it after the final floated element within the section, that will cause section to expand to contain the floated elements as you would suspect.

This is a result of floated elements disrupting the normal document flow, there is a video covering this somewhere on treehouse that has a pretty elegant solution to it, I don't have a link unfortunately.

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

You can either take the Header and footer out of the container element, or, target them more specifically in your CSS. 

    .container .header, .container .footer {}
Pedro Baumann
Pedro Baumann
12,815 Points
Pedro Baumann
Pedro Baumann
12,815 Points

I have revised your link but the problem doesn't appear to me, maybe you have solved it already by following the advice given above!

Ibrahim Rodrí­guez
PLUS
Ibrahim Rodrí­guez
Courses Plus Student 2,495 Points
Ibrahim Rodrí­guez
Ibrahim Rodrí­guez
Courses Plus Student 2,495 Points

Thanks for your help guys!

Last question. The navigation is not working well on firefox, it's taking a double space. See the image:

http://cl.ly/image/0V2w3n2g0322

Link: http://982px.com/test001/