Question

I’m currently developing a site where I am using Twitter Boostrap for the frontend. On the frontpage I have three boxes (thumbnail boxes in Twitter Boostrap terms) which contains an image and some text. The problem, though, is that these boxes can be of different heights depending on either the height of the image and the amount of description text.

My markup is as follows:

<ul class="thumbnails">
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/1.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>          
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/2.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>   
    <li class="span4">
        <div class="thumbnail">
            <img src="img/products/3.png" alt="">
            <h3>Thumbnail label</h3>
            <p>Thumbnail caption...</p>
        </div>
    </li>   
</ul>

I have tried with this plugin, instantiating it like this:

<script>
    $().ready(function () {
        // Ensure equal heights on thumbnail boxes
        $('.thumbnail').equalHeights();
    });
</script>

Without any effect :-/

I’ve also tried the following:

// Ensure equal heights on thumbnail boxes
$('.thumbnail').css({
    'height': $('.thumbnail').height()
});

But then it sets the thumbnail boxes to 90px height.

Does anyone know of a solution to this?

Thanks in advance.

Answer 1

Change your window.load to document ready. It’s a bit faster.

<script>
    $(function(){
        // Ensure equal heights on thumbnail boxes
        $('.thumbnail').equalHeights();
    });
</script>