CSS/JS: Floating block elements of differing heights?

Question

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’t respond well to being floated. (Hence the huge hole in the middle of the page.)

I know I’ve seen a JS workaround, that calculated the heights and put the elements where they’d fit, but I can’t for the life of me find it now — anyone remember it, or have any other ideas? ;)

Answer 1

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>

Answer 2

Try this on for size:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 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.

Answer 4

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

It's configurable.

Answer 5

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()