Seamless horizontal columns

Question

I know how to create horizontal columns with inline-blocks as proposed here, but using this technique the items on the second line are displayed with a vertical gap when having different heights.

I don't want the vertically gaps between the tiles. How to get rid of them with only using CSS?

What I now have looks like this:

<div class="tilecontainer">
    <div class="tile">
        <div class="content">
            <strong>#1</strong>
            <p>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.</p>
        </div>
    </div>
    <div class="tile">
        <div class="content">
            <strong>#2</strong>
            <p>Vestibulum ipsum quam, faucibus nec aliquet eget, molestie vel urna. Integer et dui mi.</p>
        </div>
    </div>
</div>

With this CSS:

.tilecontainer{
    width: 100%;
}
.tile{
    width:33.33333333%;
    display: inline-block;
    vertical-align: top;
    margin: -2px;
}

JSFiddle: http://jsfiddle.net/tg1a905r/1/

Answer 1

You can use CSS3 columns. Not a cross browser solution, but you can fallback with modernizr to the current layout that you have in IE and older browsers.

This goes to the parent element:

-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;

And to avoid content breaking on column change, add this to the content:

break-inside: avoid-column;
-webkit-column-break-inside: avoid;

See updated jsfiddle: http://jsfiddle.net/tg1a905r/7/

Answer 2

Masonry did the trick for me. As Ruddy proposed.