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 Layout Basics Page Layout with the Float Property Creating a Horizontal Navigation with Floats

Omarwali Jones
Omarwali Jones
8,251 Points

need some clarification on information provided in the video.

Did Guil mean to say

"If a block level element contains floated block level elements then its height collapses.... is this what he meant to say? Because he cut his sentence short literally one key word lol. Or does this collapsing problem apply to inline elements as well? Because the img contained within the secondary div seems to be fine.

2 Answers

I am pretty sure that the entire element collapses in the sense that floating an element (like a div) actually removes it from the "content box" of the parent element. In the example that is given in this lesson, basically all the content is removed from the parent element, so it basically ceases to exist. It's not just the height, but in the example the height is the kind of notable change. In a different situation though, you might be able to see the collapse of the width as well. For example, if there were multiple boxes on the same line and you floated the content of one of them.

Nathan Heffley
Nathan Heffley
19,878 Points

I believe he said what he meant to say. Guil was just saying that if all of the elements within another element (like the header container div) that containing element "collapses" down to the height that it would be as if those floated elements were no longer inside of it.

If you open the workspace and follow the changes that Guil makes, at the end you can play with the main header's CSS and see that changing the padding of the header still has the correct effect in the browser. The header just acts as if there was no content inside of it.