How to float elements in a masonry layout like mag

Question

I am trying to achieve a layout where items will float like newspaper/magazine article sections. It is something similar as what jQuery's Masonry does. But I was trying to achieve that only using CSS3. I thought perhaps the box display property could do it. Although after trying for few times, I wasn't able to make the items slide down after the parent column width as fulfilled.

Is there any way to achieve this layout only using CSS?

The markup would be something like this:

<article>
    <section>...</section>
    <section>...</section>
    <section>...</section>
    <section>...</section>
</article>

Here a section would float left and adjust itself on the columns queue where better fit (and not bellow the baseline of the previous one, as simple float does).

Answer 1

It's possible using CSS columns. Here is a good explanation.

CSS:

div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px; }

div a{
display: inline-block; /* Display inline-block, and absolutely NO FLOATS! */
margin-bottom: 20px;
width: 100%; }

HTML:

<div>
<a href="#">Whatever stuff you want to put in here. Images, text, movies, what have you. No, really, anything!</a>
...and so on and so forth ad nauseum.
</div>

Also, I found this site by searching "CSS Masonry" on Google. It was the second result.