CODEWITHSUNDEEP
javascriptcsscss-float
Twisted Intellect
Twisted Intellect

Reputation: 25

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’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? ;)

Upvotes: 1

Views: 1229

Answers (4)

graham
graham

Reputation: 946

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

Upvotes: 0

René
René

Reputation: 6176

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

It's configurable.

Upvotes: 3

Isaac Lubow
Isaac Lubow

Reputation: 3573

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.

Upvotes: 0

lock
lock

Reputation: 6614

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>

Upvotes: 0

Related Questions