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

James Barrett
James Barrett
13,253 Points
Posted by James Barrett
James Barrett
13,253 Points

"If a block level element contains floated elements, its height collapses" What exactly does this mean?

Hi there!

Struggling to understand what exactly Guil means on this part of the video. Let's say I have a H1 (block level element) and I have a unordered list floated next to it, what would be the drawbacks (if any)?

I think what is most confusing me is the 'contains' keyword. I'm interpreting floated elements as just elements that are on their own and not 'in the page flow'.

Thanks, James.

2 Answers

Aurelien Roux
Aurelien Roux
25,567 Points
Aurelien Roux
Aurelien Roux
25,567 Points

Let's say you have a div that acts as a wrapper and contains another div

<div class=wrapper>
   <div class=inside></div>
</div>

and add some css to see both elements 

.wrapper{
  border: 4px dashed black;
  background-color: steelblue;
}

.inside{
  height: 100px;
  width: 100px;
  background-color: aqua;
  /*   float: left; */
}

without the float property, you can see the entire wrapper that contains the inside div of 100px by 100px. with the float property, the inside div is removed from the flow, so wrapper doesn't have any height indication and will collapses

Paul M
Paul M
16,370 Points
Paul M
Paul M
16,370 Points

What he means is that is height "collapses" if it has a floated element because it is not part of the div or group that it is in. Hope this helps