Divs of varying size don't float correctly

Question

If I float:left a bunch of divs that are the same dimensions, it seems to work well, for example: divs properly floating

However, if one of the divs is taller than the others, only the first div will float left of it and the rest are all pushed to the right. I can reproduce this by increasing the height of divtwo in the example:

div.divone{
  width:100px;
  height:100px;
  background-color: red;
  border-style: solid;
  border-color: blue;
  float: left;
}

div.divtwo{
  width:100px;
  height:250px;
  background-color: green;
  border-style: solid;
  border-color: blue;
  float: left;
}

<div class="divone">abc</div>
<div class="divtwo">abc</div>
<div class="divone">abc</div>
<div class="divone">abc</div>
<div class="divone">abc</div>
<div class="divone">abc</div>

An image of the two examples side by side with an arrow pointing to where I'm expecting the divs to go

What should I do to get those small divs to properly fit in the empty space to the left of the tall div?

score 0 · Answer 1 · answered Sep 16 '16 at 02:31

0

Sounds like you are looking for masonary type layouts. Here's a good blog post.

https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a#.64f1qm9a

answered Sep 16 '16 at 02:31

bobsfishmarket

41
1
6

score 0 · Answer 2 · edited May 23 '17 at 12:15

Taken from my answer here.

div {
  width: 100px;
  height: 100px;
  break-inside: avoid-column;
}
#red {
 background-color: red;
}
#green {
 height: 250px;
 background-color: green;
}
#blue {
 background-color: blue;
}
#yellow {
 background-color: yellow;
}
#orange {
 background-color: orange;
}
body {
  width: 300px;
  columns: 3;
}

<body>
 <div id="red"></div>
    <div id="yellow"></div>
 <div id="green"></div>
 <div id="blue"></div>
    <div id="orange"></div>
</body>

You can use CSS columns to achieve this effect quite easily.

Divs of varying size don't float correctly

2 Answers2