CSS get rid of extra spacing when using float:left;

Question

I have a bunch of red squares with flexible content.

<div class="block">
lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>

I would like it that if the screen is wide enough, instead of showing each block by block, I would put two side by side.

I was able to do this but when I do it like this there is extra spacing if the two elements have different heights.

See my jsFiddle: https://jsfiddle.net/78k9vvf6/

.block {
  width: 40%;
  margin-right: 10%;
  margin-top: 10px;
  margin-bottom: 10px;
  background: red;
  color: white;
  float: left;
}

Does anyone know of anyway to get rid of this extra spacing?

I do not want to put them into separate parent elements, because if I do it like that I will have to change the elements' parents every time I resize the screen.

Thanks in advance,

David

Answer 1

Another way of doing this without using any javascript or libraries is to use float:left; and float:right;.

By doing this they will shift up, because floating to the right and to the left are independent from each other.

For example, when floating to the right, it acts as if there is no elements on the left.

For the elements on the left use float: left', for the elements on the right use float: right;.

Here is a JSFiddle: https://jsfiddle.net/78k9vvf6/2/

You may need to update the width of the parent container, to have the elements still positioned in the correct area.

To target every second item to float to the left instead of the right, I used the css nth-child. See below:

.block {
    ...
    float: left;
}

.block:nth-child(even) { /* even -> every second block */
    float: right;
}

I know it seems like this is pointless and that you could just have two containers - one for the right, one for the left - and float them both to the left, but the reason it had to be done this way is because I needed them to be able to go one under each other when the screen got too small. To do that, I used a media query and when the screen was to small I floated each element to the left:

@media screen and (max-width: X px) {
    .block { float: left; }
}

The only disadvantage to this solution compared to the masonry solution that I know of is that if pure out of luck it happens that all the items on the right are way taller than the items on the left, there will be lots of extra space on the bottom left. You can see that in the JSFiddle link given above.

Also you need to clear the right.

Answer 2

You can have the elements occupy all of the vertical space by making the parent display: flex; flex-wrap: wrap;.

If you want the elements to move up so that they fill the vertical gaps created, there is no easy way to do that just with CSS. You would need to use a library like masonry.

.parent {
  display: flex;
  flex-wrap: wrap;
}
.block {
  width: 40%;
  margin-right: 10%;
  margin-top: 10px;
  margin-bottom: 10px;
  background: red;
  color: white;
}

<div class="parent">
<div class="block">
    hello.
    <br>stackoverflow.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.<br>
    world.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
</div>

*edit - Since you said you want the items to shift up, here's a demo with masonry.

$('.parent').masonry();

.block {
  width: 40%;
  margin-right: 10%;
  margin-top: 10px;
  margin-bottom: 10px;
  background: red;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<div class="parent">
<div class="block">
    hello.
    <br>stackoverflow.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
<div class="block">
    hello.<br>
    world.
</div>
<div class="block">
    lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum. lorem ipsum.
</div>
</div>