How do I float articles in two columns?

Question

I have this problem. I am building a social website and I have to create posts in two columns. The parent container is a section, instead the elements "post" are articles that have as their style float: left. How do I let slip to the post of the empty space that creates under those shorter?

enter image description here

I've had this problem before myself. I ended up using JavaScript to pull the items out of the element in which they reside and append them incrementally into 3 columns. It's not the most elegant of solutions though. — tommypyatt, Apr 02 '14 at 16:10
I don't want copy my source code because there is a simple articles into a single section. Maybe the best solution is MASONRY posted by @superUntitled — iulianrusu, Apr 02 '14 at 16:16

score 5 · Accepted Answer · answered Apr 02 '14 at 16:08

5

there is no good solution in css yet. this is typically called a masonry or pinterest layout. use jquery.

try... http://masonry.desandro.com/

or google 'masonry layout plugin'

answered Apr 02 '14 at 16:08

superUntitled

22,351
30
83
110

score 0 · Answer 2 · edited Apr 02 '14 at 16:46

This basic JavaScript function might be of help. It uses jQuery:

function structurePosts(holder){
$(holder).find('.post-item').each(function(){
        $(this).appendTo('.col-append');
        var nextColumn = $('.col-append').next('div');
        $('.col-append').removeClass('col-append');
        if(nextColumn.size()){
            nextColumn.addClass('col-append');
        } else {
            $('.post-col').first().addClass('col-append');
        }
    });
}

You would call it like:

structurePosts('#container-with-posts');

It basically just iterates through each contained element with a class of post-item and puts them into columns that have a class of post-column

It would require a HTML structure as follows:

<div class="posts-columns">
    <div class="post-col col-append"></div>
    <div class="post-col"></div>
    <div class="post-col"></div>
</div>
<div id="container-with-posts">
    <div class="post-item> <!-- Post content here --> </div>
    <div class="post-item> <!-- Post content here --> </div>
</div>

Of course you'd need to then add styling to suit, or modify the markup and code to match your CSS.

How do I float articles in two columns?

2 Answers2

Linked