Why after the third row the float property does not work correctly?

Question

After some rows the css float property have a strange behavior that i couldn't know its reason.

Take into account that I cannot add a div with a "clear" property between the rows because the html will be generated dynamically (php loop).

I think that in order to do that I should create a function in php that determines when to insert a clear div between the rows because sometimes there are 2 images per and other times 3.

But I prefer a CSS solution.

Here is the full code:

.row {
    width: 600px;
    text-align: center;
    margin: 0 auto;
}

.boxes{
    box-sizing: border-box;
    position: relative;
    min-height: 1px;
    height: auto;
    float: left;
    padding-left: 10px;
    padding-bottom: 10px;   
}

.box1 {
    width: 33.33333333333333%;
}

.box2 {
    width: 66.66666666666666%;
}

.box-inner {
    background-color: grey;
    width: 100%;
    height: 100%;
}

.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

<html>

  <body>
    <div class="row">
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box2 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
        </div>
      </div>
      <div class="box2 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
      <div class="box1 boxes">
        <div class="box-inner">
          <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
        </div>
      </div>
    </div>
  </body>

</html>

use inline-block or flexbox instead – Temani Afif Oct 12 '20 at 19:27 — Temani Afif, Oct 12 '20 at 19:27

score 0 · Accepted Answer · answered Oct 12 '20 at 18:20

In your example, you have an image that's slightly shorter than the one before it. That's causing the gap on the following row which clear would normally fix. if you had the same number of elements per row then something like nth-child could be used with clear, but since you said the number of elements per line could change, that wouldn't work. An easy fix is to set a minimum height on your .box-inner class:

.row {
  width: 600px;
  text-align: center;
  margin: 0 auto;
}

.boxes {
  box-sizing: border-box;
  position: relative;
  min-height: 1px;
  height: auto;
  float: left;
  padding-left: 10px;
  padding-bottom: 10px;
}

.box1 {
  width: 33.33333333333333%;
}

.box2 {
  width: 66.66666666666666%;
}

.box-inner {
  background-color: grey;
  width: 100%;
  height: 100%;
  min-height: 122px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

<div class="row">
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box2 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
    </div>
  </div>
  <div class="box2 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/770/238?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
  <div class="box1 boxes">
    <div class="box-inner">
      <img class="img-responsive" src="https://picsum.photos/390/244?random=1" alt="">
    </div>
  </div>
</div>

JAzelvandre · Answer 2 · 2020-10-12T18:28:11.537

0

The easiest solution is to add a fixed height to your container.

.box-inner {
    background-color: grey;
    width: 100%;
    height: 120px;
    overflow: hidden;
}

Another addition to the above is to add object-fit: cover to your image to ensure it fills the container space.

.box-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

edited Oct 12 '20 at 18:28

answered Oct 12 '20 at 18:22

JAzelvandre

26
2

Why after the third row the float property does not work correctly?

2 Answers2