Fluidly float div left

Question

Here's a image of what i'm trying to do vs what i'm getting

Basically i'm floating all the div left but because the first div's height is taller than the rest, its leaving a gaping hole.

The generated divs are products in a shop collection. while the tall first div is a filter menu that's always present.

How do i get all the div to fluidly float left and fill in the empty space. Should i be looking at flex box? And its NOT a masonry / isotope kind of layout. only the first div has a taller height

here the page im working on: http://goo.gl/4LfgAx

Your question asked if the layout was possible with flexbox. The link I posted explains why it's not. — Michael Benjamin, Mar 04 '16 at 06:55

score 1 · Accepted Answer · answered Mar 04 '16 at 06:46

Hope this helps:

div.container{
  width: 250px !important;
  border: none;
}
div.container div.row{
  width: 100%;
  border: none;
}

div.container div.row div{
  border: 1px solid black;
  height: 50px;
  float: left;
  margin: 1px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-3" style="height: 100px;"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
    <div class="col-xs-3"></div>
  </div>
</div>

Fluidly float div left

1 Answers1