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 trialMatt Campbell
368 PointsWhen I add "float: left;" to my header, it creates a little bar under the nav that is the same color as the header.
Why does this happen and how do I get rid of it?
3 Answers
miikis
44,957 PointsHey Matt,
When all the elements in a given container are floated, that container collapses. There's a fix for this here. Let me know if that helps.
Luis Amez
10,289 PointsHi Matt,
I don't know if you will read this but, just in case, here you have your solution.
Your problem isnβt with the float but with the margins. You have to remove the bottom margin in the Navigation section.
Your code is:
/****************************************************** Navigation *******************************************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0; }
But it should be:
/****************************************************** Navigation *******************************************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
Because when you write:
margin: 20px 0;
Is like you write:
margin: 20px 0 20px 0;
So you have a bottom margin of 20px and the browser fills that space with the background color of the parent element (header in this case).
I hope that helps you. And sorry for my English.
Yuriy L
Courses Plus Student 32 PointsThe same problem, nothing helps, "fix" does nothing. Upd.: I didn't specify a padding for <nav>, when I added "padding: 10px 0;", problem has resolved.
Matt Campbell
368 PointsMatt Campbell
368 PointsHi Mikis, Thanks for taking the time to help out. I still can't figure out how to clear my float (nor do I really understand what that means.
Here's my code:
miikis
44,957 Pointsmiikis
44,957 PointsFloating takes a given element out of the normal document flow and positions it either to the left-side or the right-side of it's parent element/container. What happens is, whenever you float ALL the child elements of a given parent container, that parent container collapses, i.e. it assumes no height... it's weird. But there's a "fix" for it, a workaround if you will. If I understand correctly, all the "fix" does is fool the parent container into thinking that at least one of its child elements have not been floated...i.e. at least one of the parent container's child elements remains in the normal document flow a.k.a static positioning.
This is the most common css for that "fix." Basically, you just add the class
group
to any parent container to make sure it doesn't collapse on ya.Also, in your code, you floated the
header
. Why? I can't be sure without looking at your HTML, but more than likely, theheader
is the parent container for yourlogo
and thenav
. I'm assuming you want thelogo
and thenav
to be side-by-side... in this case, you would float both thelogo
and thenav
...not theheader
.Hope that helps man.