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 CSS Basics (2014) Basic Layout Clearing Floats

armand Rodriguez
armand Rodriguez
7,830 Points

Question about how floats used in "How to make a website" lesson

So I totally understand how floats are being used here, how the clear works, i just have one question from the lesson previous to this in the "How to make a website" section. In that section, the instructor floated the headerβ€”for reasons I'm not entirely sure ofβ€” and then for #gallery ,which is right above the footer, he cleared the footer just using footer { clear: both; }. In that case, was he just not concerned with the height of the gallery collapsing? Is there a reason he just didn't use the method shown in this video?

2 Answers

I don't have a real thorough explanation of why, and I wondered the same thing as you. I think it's because nick was just showing the super basics. Sometime it seems like just using

footer {
  clear:both
}

works just fine. Sometimes it doesn't. Maybe it has to do with the complexity or makeup of the layout. Maybe someone else can give you a more insightful answer.

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

I wondered the same thing, but I think it's because Nick is using a transparent footer that is blended in with the body color. There is not even a border style defined like in this course's webpage. Nick used the padding-top property to give some space between the body's content above the footer, which he could since it's the same color background and it can be looked at like a margin. Therefore, since margin's collapse, in this course there is other declarations in the css rule like display: table to stop the margin-collapse. Nick didn't need that and probably used a fast basic method since his footer has no border or different background-color.

Hope I explained this alright and that you understand, this is what I made out of it when watching both courses and creating my own projects with two different types of footers. Thanks!