HTML stack floating divs vertically

Question

While stacking DIVs of varying height, it creates a lot of empty space while it breaks to the next line. Group 1 and Group 5 in the attached image. I tried inline-block, float:left, display: flex;flex-wrap: wrap; and few other properties and cant seem to figure this out. I see other posts recommending JQuery based solutions. Is it possible to achieve this using HTML and CSS only [pinterest style layout]?

<html>
<head>
<style>
    body { background: none repeat scroll 0 0 #EFEFEF; font-size:12px;font-family: "Courier New", "Courier", "monospace"; }
    fieldset{border-color: grey;border-style: solid;} 
    div.groups{ width:300px;float:left;padding:5px 3px 5px 8px;}
    div.container{ width:100%;}
</style>
</head>
<body><br>
<div class = "container">
    <div class = "groups"><fieldset> <legend><b>Group 1</b></legend>
    <ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
    </ol></fieldset></div>
    <div class = "groups"><fieldset> <legend><b>Group 2</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
    </ol></fieldset></div>
    <div class = "groups"><fieldset> <legend><b>Group 3</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
    </ol></fieldset></div>
    <div class = "groups"><fieldset> <legend><b>Group 4</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
    </ol></fieldset></div>
    <div class = "groups"><fieldset> <legend><b>Group 5</b></legend><ol><li></li> <li></li>
    </ol></fieldset></div>
    <div class = "groups"><fieldset> <legend><b>Group 6</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
    </ol></fieldset></div>
    <div class = "groups"><fieldset> <legend><b>Group 7</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
    </ol></fieldset></div>
</div>
</body>
</html>

VXp · Answer 1 · 2020-04-13T15:29:35.333

Filling vertical gaps between elements is not possible with floats, also no need for JS or jQuery while you can do it with the CSS columns:

body {font-size: 12px; font-family: "Courier New", "Courier", "monospace"}
fieldset {border-color: grey; border-style: solid} 
ol {list-style-position: inside}

.container {
  column-count: 3; /* three columns per row */
  column-gap: 0; /* for horizontal gaps between groups */
}

.container > .groups {
  page-break-inside: avoid;
  break-inside: avoid-column;
  padding: 5px 8px;
}

@media (max-width: 768px) {
  .container {column-count: 2} /* two columns per row */
}

@media (max-width: 480px) {
  .container {column-count: 1} /* one column per row */
}

<div class="container">
  <div class="groups"><fieldset><legend><b>Group 2</b></legend><ol><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  </ol></fieldset></div>
  <div class="groups"><fieldset><legend><b>Group 2</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
  </ol></fieldset></div>
  <div class="groups"><fieldset><legend><b>Group 3</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
  </ol></fieldset></div>
  <div class="groups"><fieldset><legend><b>Group 4</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
  </ol></fieldset></div>
  <div class = "groups"><fieldset><legend><b>Group 5</b></legend><ol><li></li> <li></li>
  </ol></fieldset></div>
  <div class = "groups"><fieldset><legend><b>Group 6</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
  </ol></fieldset></div>
  <div class = "groups"><fieldset><legend><b>Group 7</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
  </ol></fieldset></div>
</div>

This solution is fully responsive.

HTML stack floating divs vertically

1 Answers1