title: Positioning Divs using CSS (Float div below another div)
body: <p>I am trying to create several <code>div</code>s and lay them out onto several rows and columns. I have positioned them using <code>float</code> (for columns in same row) and <code>clear</code> to create a new row. It all works fine, see <a href="http://jsfiddle.net/ujq60xb9/" rel="nofollow noreferrer">JSFiddle</a></p>
  
  <p>Now, my issue is that the <code>div</code>s in my rows can be of arbitrary height and not uniform. If a particular div in my row is taller than the rest, it would create the next row with a <code>blank space</code> below the shorter divs. Is there anyway I can avoid the space and position the div just below the previous row's div?</p>
  
  <p>Below is a pictorial representation of what I got and what is the expectation:</p>
  
  <p><strong>Current layout:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/U3T57.png" alt="enter image description here"></p>
  
  <p><strong>Expected layout:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Kgh2R.png" alt="enter image description here"></p>