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 The Float Challenge

Posted by Nigel Rodgers
Nigel Rodgers
15,777 Points

I found another method to fix collapsing boundaries.

I figured out another method to fix the collapsing boundaries issue. I added an empty div and gave it the class 'clear':

<div class="clear"></div>

in CSS I cleared the floats in the '.clear' div:

.clear { clear: both; }

Here's a link to my workspace: https://w.trhou.se/1vu5bv0g4v check lines 40 in index.html and line 156 in style.css

Nigel Rodgers
Nigel Rodgers
15,777 Points

Is it a good idea?

1 Answer

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

Sure, that's essentially the same thing as the well-known "clearfix". The difference with the conventional clearfix is that it employs a pseudo-element to make adding an extra DIV to the HTML unnecessary.

The conventional way would be to add this to CSS (but no change to the HTML):

.container::after {
  content: "";
  display: block;
  clear: both;
}

If you don't mind adding to the HTML, your method is functionally identical.