CSS/JS: Floating Block Elements Of Differing Heights?

Here’s what I'm working with. As you can see, I’ve got a lot of block elements, that I want to get into five columns. However, since they’re of differing height, they don’

Solution 1:

Maybe what you'd like is: http://desandro.com/resources/jquery-masonry/

It's configurable.

Solution 2:

You can actually remedy your case by simply putting a block for every 5 floating elements that has a style of clear:both

example:

<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<div style='clear:both'></div>

Solution 3:

If you don't mind relying on JS for a proper layout, why not set up five <div> elements, like columns, each of which is a certain width (you can give them an HTML class and then set their width dynamically if you choose)? You can total the heights of the block elements and then use JS to tell it how many to drop into each column <div>. This can work dynamically on the onresize event. The code would be very easy to write, even more so If you're using jQuery.

Solution 4:

If you don't mind each element being the same height as the tallest try this function (jquery):

function evenHeights(element) {
    var x = 0;
    $(element).each(function(){
        var h = $(this).height();
        if (h > x) x = h;
    });

    $(element).each(function() {
        var thumbHeight = x;
        $(this).height(thumbHeight);
    });
}

and call evenHeights($(".bloggpost")); within your $(document).ready(function()