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?

Answer 1

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'

Answer 2

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.