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
Aidan Seraphine
431 PointsWhy do I need to use the 'clear' property to remove white space above floated header?
I'm in the middle of the 'How to Make a Website' course and I came across a peculiar problem which I haven't quite found an answer to....well technically, I've found an answer, it just lacks an explanation.
The problem is that once the header has been floated to the left, there is white space above it. I found the solution to this problem by reading through a thread on stack overflow. If I apply the declaration clear:both to my #wrapper, it removes the white space for some unknown reason. This makes no sense to me as my header is not part of #wrapper, so I don't see why it should affect the header.
So my first question is what's the reason for the white space above the header when it's floated and why does clear:both remove it? I would like a detailed answer if possible. My second question is why did Nick not encounter the same problem within his CSS on the tutorial videos? He never applied that declaration to #wrapper, so why didn't he have that random white space? I followed his code line for line.
Jason Anello
Courses Plus Student 94,610 PointsOk, thanks.
Can you link to the video you're on?
Are you sure that your code is exactly the same as Nick's at this point?
I can answer your first question right now but not the second without knowing the state of Nick's code at this point in the project.
Aidan Seraphine
431 PointsJason Anello I've just got up to the video where he starts building the about page. The last video I watched was 'polish the navigation and footer'. Anyway, would you mind telling me which part of my code is creating this blank space above the header and why clear:both (applied to #wrapper) removes it?
Edit: here's the link https://teamtreehouse.com/library/how-to-make-a-website/styling-web-pages-and-navigation/polish-the-navigation-and-footer
Aidan Seraphine
431 PointsJason Anello Thank you for your detailed reply. Very helpful :)
1 Answer
Jason Anello
Courses Plus Student 94,610 PointsThe paragraphs that you have on your about and contact pages is what is causing the gap. Specifically, the top margins on those paragraphs. Nick has different html for the about and contact pages than what you have and so he ended up not getting that gap.
The reason the gap is occurring above the header is because of something called vertical margin collapsing and because the header is floated.
Whenever 2 vertical margins are touching each other, (because they aren't separated by padding, borders, or content) they will collapse or join together to form a single margin.
In this case, it means that the top margins for the wrapper div, the section element, and the paragraph element will join together to form a single margin.
Here's an mdn page on vertical margin collapsing: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing which you can look at if you want to know more details.
A positive top margin on any of those 3 elements will cause the gap above the header.
The reason it happens above the header is because the header is floated which is what you noticed. The content boxes for the wrapper div and the other 2 elements all extend to the top of the header because it's floated. This is the root of the problem and it's what clear: both fixes.
By applying clear: both or clear: left to the wrapper div, the browser has to force the wrapper div down below any previously floated items. So instead of the content box for the wrapper div extending all the way to the top, it will begin at the bottom of the header where you might expect it to.
You still have vertical margin collapsing at this point but that margin can no longer reach the top and cause a gap up there.
Jason Anello
Courses Plus Student 94,610 PointsHere's a simple way that you can test out margin collapsing.
The html -
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eius doloremque animi ipsum, deleniti numquam nesciunt est sunt dolorum cumque nobis minus soluta voluptas, quisquam perferendis harum provident ea nemo.</p>
</div>
The css -
body, p {
margin: 0;
}
div {
background: yellow;
/* border: 1px solid black; */
}
p {
/* margin-top: 20px; */
}
Here's a codepen demo with that html and css: http://codepen.io/anon/pen/qaGjLp
First, uncomment the paragraph top margin. When you do that you might expect that it will push the paragraph down from the top of the div and we should see 20px of yellow background above the paragraph. Instead it pushes the entire div down.
This is because the div and paragraph's top margins are touching each other and collapse into a single margin.
Now, uncomment the border for the div. You'll see the div go back up and the paragraph is now pushed down 20px from the top of the div.
The border on the div acts to physically separate the 2 margins and now they are 2 independent margins. The margins on the paragraph are contained within the div and can no longer reach outside of it.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Aidan,
Can you post a snapshot of your workspace?
Without seeing your code I couldn't tell you specifically why you're getting that gap. There is probably some small difference between your code and Nick's
Others have gotten that gap because they tried to customize the page a bit by adding a heading element.