title: Seamless horizontal columns
body: <p>I know how to create horizontal columns with inline-blocks as proposed <a href="https://stackoverflow.com/questions/19502580/css-columns-order-horizontally">here</a>, but using this technique the items on the second line are displayed with a vertical gap when having different heights.</p>
  
  <p>I don't want the vertically gaps between the tiles. How to get rid of them with only using CSS?</p>
  
  <p>What I now have looks like this:</p>
  
  <pre><code>&lt;div class="tilecontainer"&gt;
      &lt;div class="tile"&gt;
          &lt;div class="content"&gt;
              &lt;strong&gt;#1&lt;/strong&gt;
              &lt;p&gt;Ut augue urna, tristique ut turpis quis, lobortis iaculis libero. Cras maximus rhoncus enim vitae blandit. Maecenas elit elit, vulputate sit amet velit volutpat, vulputate egestas sem.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="tile"&gt;
          &lt;div class="content"&gt;
              &lt;strong&gt;#2&lt;/strong&gt;
              &lt;p&gt;Vestibulum ipsum quam, faucibus nec aliquet eget, molestie vel urna. Integer et dui mi.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With  this CSS:</p>
  
  <pre><code>.tilecontainer{
      width: 100%;
  }
  .tile{
      width:33.33333333%;
      display: inline-block;
      vertical-align: top;
      margin: -2px;
  }
  </code></pre>
  
  <blockquote>
    <p><strong>JSFiddle:</strong> <a href="http://jsfiddle.net/tg1a905r/1/" rel="nofollow noreferrer">http://jsfiddle.net/tg1a905r/1/</a></p>
  </blockquote>