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!

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


8,539 Points

float:left causing div container's height collapsed

Hi guys,I changed the project of one in the css layout course to pratice my layout and I bumped in some issue with "float:left",here is my html/css

<div class="container clearfix">

 <div class="first col ">


     <img class="ski" src="ski.jpg" alt="ski">

    <p>During the winter months, the south island, especially the are around Queenstown, has snow covered mountains that offer some of the best skiing in the southern hemisphere.</p>
        <p>Prices will vary depending on where you go, how you get there, what equipment you rent, and how long you go for, but expect to pay a few hundred dollars per person.</p>

 <div class="second col">

    <img class="skydive" src="skydive.jpg" alt="skydive">

    <p>Another popular adventure activity in New Zealand is skydiving.</p>
    <p>The best place for this is over Lake Taupo. It provides a stunning backdrop as you plunge to Earth from 15,000ft.</p>
    <p>There are also a ton of campgrounds throughout the country with rates around 15 NZD per night.</p>
    <p>A jump from 12,000ft will cost you around 300 NZD, while a jump from 15,000ft that includes a video, photos, and t-shirt is 550 NZD.</p>
 </div> <!---second--->

</div> <!---container--->
@media (min-width: 769px) 

.container {
    width: 90%;
    margin: 0 auto;

.col {
  float: left;

  width: 33%;

/* ---- Float clearfix ---- */

.clearfix::after {
content: " ";
display: table;
clear: both;


@media (min-width: 1025px) 

.container {
width: 80%;
max-width: 1150px;


There are another 12div container are the same ,but that will makes this question too long. This works fine when the <h2> are shot,and <p> are not too long/much.

However,sometime the <h2> is too long and turn into 2line,or the <p>are too long, the whole div will stretch too long, and it makes other div can't "float" to left side,look exatctly like this http://oexr2nm51.bkt.clouddn.com/blog/every-css/cssfloats101-8.jpg

I tried to solve this with giving all the div "col" height:700px,which feels like a half way solution. The div "col" will float properly now to the left side,but when the <h2> is too long and become 2line,the div "col" torched to longer than other div "col",and they don't look "inline"anymore.

I've try "overflow" "clear:left" not sure if I used them correctly but they can't do any good

sorry for my poor english, hope you guys can take a look cheers!

2 Answers

Steven Parker
Steven Parker
225,726 Points

You have the right idea with the "clearfix".

What your image shows is often called a "masonry layout" and is desirable for some purposes. But if that's not what you want, you might need to add some additional inner containers to apply your clearfix between the rows. One trick to using floats is that the don't count when the browser computes space for the content flow, thus the need for the clearfix.

You might also look into flexbox for creating your layout. It's a more modern technique and was developed specifically to avoid some of the pitfalls of floats.

Hi Wanjyun

You could try nth-child on every 4 column, this will make the second row of "columns" line up. You are also missing the "{" after each media query.

.col:nth-child(4n) {
  clear: left;