float:left causing div container's height collapsed

Question

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 ">

  <h2>Skiing</h2>

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

    <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><!---first--->

 <div class="second col">
   <h2>Skydive</h2>

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

    <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;
}

.name,
.col {
  float: left;
}

.col{
  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!

Answer 1 · 2017-06-24T15:27:32Z

June 24, 2017 3:27pm

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.

Answer 2 · 2017-06-24T15:36:15Z

June 24, 2017 3:36pm

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;
}

Welcome to the Treehouse Community

Looking to learn something new?

WANJYUN WANG

WANJYUN WANG

float:left causing div container's height collapsed

2 Answers

Steven Parker

Steven Parker

You have the right idea with the "clearfix".

Chris Jardine

Chris Jardine