Question

I have a site. I want to make 3 vertical divs with equal height. For this purposes I change the height of last block in each column/div.

For example, the naming of 3 columns are:

.leftCenter
.rightCenter
.right

Now I wrote a code which set the equal height for .leftCenter and .rightCenter:

var left = $('.leftCenter').height();
var center = $('.rightCenter').height();

var news = $('#newItemsList').height();

if (center < left)
    $('.rightCenter').height(center + (left-center));
else if (center > left)
    $('#newItemsList').height(news + (center-left));

news is the latest subblock in left column (there are 3 images in it). So, if central div is bigger than left div, I change the height of news to make them equal. This code works in Firefox, but doesn’t work in Chrome. That’s the first question. And the last is: how to make equal 3 divs (including right one).

Answer 1

I needed to make elements equal in height and width so I made the following function that allows you to define a height, or width, or really whatever at it. refType would be used if you sent a min-height and needed it to match the height of the tallest element.

elemsEqual = function (options) {
        var defaults = {
                'type' : 'height',
                'refType' : '',
                'elements' : [],
                'maxLen' : 450
            },
            settings = $.extend({}, defaults, options),
            max = 0;

        $(settings.elements.join(",")).each(function () {

            max = Math.max( max, parseInt( $(this).css(settings.type) ) );

            if(settings.refType.length) max = Math.max( max, parseInt( $(this).css(settings.refType) ) );

        });

        max = ((max < settings.maxLen) ? max : settings.maxLen);

        $(settings.elements.join(",")).css(settings.type, max + "px");
};

elemsEqual({elements : ['#selector1','#selector2', ... '#selectorN'], type : 'height'});