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

General Discussion

Posted by Ryan Decker
Ryan Decker
3,451 Points

Issue with Footer

Hey all!

I'm having issues with adding a footer to my page. I have my header set like this:

,,, header { float: left; margin: 0 0 20 0px; padding: 5px 0; width: 100%; background: #000000; } ,,

I am trying to get a similar result where the footer background extends to the edges of the page. When I add my footer with the same CSS as above (without the float and with adjusted margins) there is white space at the bottom of my footer AND at the top of my header.

What's going on here?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

One thing I missed before is that you don't have any units in your margin property for 20. Should be 20px. You don't necessarily need to have the pixel unit on the 0 which comes after but doesn't hurt if you do.

I would make that change and see where you're at.

2 Answers

Steven Deutsch
Steven Deutsch
21,046 Points
Steven Deutsch
Steven Deutsch
21,046 Points

Hey Ryan,

Have you tried using negative values in the margin to solve the white space issue? Try something like -10px for the top margin. Let me know if this helps, sorry I can't suggest more!

Good luck!

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Edit: originally wrote "This may not fix gap below the header..." should have been "footer"

Are you doing the "how to make a website project"? Where you have a wrapper element after your header?

Try clearing the float in your wrapper element. This may not fix gap below the footer but should fix gap above header. The problem that other people have been having is that the floated header is never cleared.

Add the clear to your existing wrapper rule:

#wrapper {
clear:both;
}

If you're doing something else then you'll have to post more code.

Ryan Decker
Ryan Decker
3,451 Points

Jason,

I am using code that I learned from the "how to make a website project." In my html I do not have a wrapper. Only the above code. When the code is by itself (no footer) it works fine. I get a header with a black border that has no white space on the top, left, or right.

When I add a footer to my html and style it with the same CSS format as the header:

''' footer{ margin: 0 0 20px 0; width: 100% background: #000000; ,,,

The footer background shows no white on the left or the right, but shows white on the bottom, and transversely, the header shows no white on left or right, but shows white on the top.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

If you only have a header and footer on your page right now then isn't your page pretty short? I realize you have a gap above your header but you mention that you have white space below your footer. Wouldn't that be expected if it's a short page or what am I missing? Also, you have a 20px bottom margin set on your footer. Not sure if that was intentional or not.

I suppose for now you could put the clear property in your footer rule. Then when you add your middle content area, whether it's a wrapper or not you would use that element to clear the floated header. Basically, whichever element you have coming directly after your header element should clear the float.

You could try using codepen.io and pasting your html and css in there to illustrate the problem and it will help make it easier to find the problem. Or give a link if you have this live somewhere.