title: How to distribute DIVS evenly (horizontal and vertical) that floats with each other?
body: <p>So here's my current dilemma, what I'm trying to achieve here is something like this:</p>
  <p><a href="https://i.stack.imgur.com/ryqML.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ryqML.jpg" alt="enter image description here" /></a></p>
  <p>Just please ignore all the contents of each boxes/divs. notice that the 6 boxes floats with each other perfectly and evenly. That's what I'm trying to replicate.</p>
  <p>So I have my own codes:</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;tentofifteen&quot;&gt;
      &lt;section class=&quot;grid-superloop-ten&quot; id=&quot;wired-superloop&quot;&gt;
      &lt;/section&gt;
      
      &lt;section class=&quot;grid-superloop-eleven&quot; id=&quot;wired-superloop&quot;&gt;
      &lt;/section&gt;
      
      &lt;section class=&quot;grid-superloop-twelve&quot; id=&quot;wired-superloop&quot;&gt;
      &lt;/section&gt;
  
      &lt;section class=&quot;grid-superloop-thirteen&quot; id=&quot;wired-superloop&quot;&gt;
      &lt;/section&gt;
  
      &lt;section class=&quot;grid-superloop-fourteen&quot; id=&quot;wired-superloop&quot;&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>    &lt;style&gt;
  
  
  .tentofifteen {
      height: auto;
      text-align: justify;
      -ms-text-justify: distribute-all-lines;
      text-justify: distribute-all-lines;
  }
  #wired-superloop {
      vertical-align: top;
      display: inline-block;
      *display: inline;
      zoom: 1
  }
  .tentofifteen:after {
      content:&quot;&quot;;
      width: 100%;
      display: inline-block;
      font-size: 0;
      line-height: 0
  }
  
  .grid-superloop-ten {width:319px; min-height:700px;background:#CCC;}
  .grid-superloop-eleven {width:220px; min-height:350px; background:#009;}
  .grid-superloop-twelve {width:437px; min-height:350px; background:#F36;}
  .grid-superloop-thirteen {width:337px; min-height:350px; background:#CC9;}
  .grid-superloop-fourteen {width:319px; min-height:350px; background:#0F0;}
      
      
      
      
      
          &lt;/style&gt;
  </code></pre>
  <p>Now, the result of this is not really successful. Which I have no idea how to figure out to float the last two divs.</p>
  <p>here's the screen shot.</p>
  <p><a href="https://i.stack.imgur.com/cBCB5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cBCB5.jpg" alt="enter image description here" /></a></p>
  <p>Any ideas what's wrong with the code? Could you please help to solve the issue?</p>