title: CSS Floating Divs with different height are aligned with space between them
body: <p>i am using left floating DIVs to simulate a two column layout (each div contains textfield to edit different data, like name, hobbies,...). So it should look like this</p>
  
  <pre><code>1 2
  3 4
  5 6
  </code></pre>
  
  <p>Now my div-boxes aren't always the same, since some DIVs have more elements than the other ones. Now my layout looks likes this</p>
  
  <pre><code>   1 2
       2 
     3 4
     5 6
  </code></pre>
  
  <p>You can also see the effect on <a href="http://www.css-technik.de/css-examples/219_9/beispiele/thumbnails2.html" rel="noreferrer" title="Example">this example</a> if you scale your so that only four or three colums are shown. E.g. if 4 columns are shown in a row there is much space between Float 1 and Float 6. This doesn't look good on my UI. What I want is to have Float 6 following Float 1 with no space in between (except the margin I define)</p>
  
  <p>Edit: My DIVs basically just contain a float:left and a width:40%, so that two fit on a screen</p>
  
  <p>Here's a screenshot showing more <img src="https://i.stack.imgur.com/uXskg.jpg" alt="alt text"></p>