How to set div height based on class of div next to it?

Question

Ok, so I have the following layout:

<div class="double_column_left">
    //Left responsive content
</div>
<div class="double_column_right">
    //Right responsive content
</div>

<div class="double_column_left">
    //More left responsive content
</div>
<div class="double_column_right">
    //More right responsive content
</div>

What I need is for the height of each set of columns (each left and right next to each other) to be the same value. So if the left is taller than the right, it would set the right column to the height of the left in Javascript, and vice versa.

This seems like something easily done in Javascript/jQuery, somehow looping through the page and matching each set of div's based on the order it comes across them each time the page is resized; but I've never really done anything like this before and can't think of how to do it.

Any ideas?

look at the answers with 4 up-votes if non of the below are useful — Turnip, Mar 14 '14 at 14:04

score 0 · Answer 1 · answered Mar 14 '14 at 13:33

0

Try this

$('.double_column_right').height(function () {
    return $(this).prev().height();
});

answered Mar 14 '14 at 13:33

Anton

32,245
5
44
54

I disagree with your answer, what if it's the other way around? ;-) – nietonfir Mar 14 '14 at 13:34
Then change selector and use `.next()`? What do you disagree with? – Anton Mar 14 '14 at 13:35
You would end up with the same problem. You need to check first which one of the columns is the larger one and then change the other one. – nietonfir Mar 15 '14 at 22:56

score 0 · Answer 2 · answered Mar 14 '14 at 13:36

Try this working solution:

Retrieve the height of one div '.double_column_right' and apply it to another div ('.double_column_left')'s min-height. Use the following JQuery code:

var divHeight = $('.double_column_right').height();

$('.double_column_right').css('min-height', divHeight+'px');

score 0 · Accepted Answer · answered Mar 14 '14 at 13:36

This should work:

function resizeColumns() {
    var $leftColumns = $('.double_column_left');
    $leftColumns.each(function() {
        var $leftCol = $(this);
        var $rightCol = $leftCol.next('.double_column_right');
        var height = Math.max($leftCol.height(), $rightCol.height());
        $leftCol.add($rightCol).height(height);
    });
 }

Now you just call this function when you need to resize the columns. Especifically, at page load and when the window size changes:

 $(document).ready(resizeColumns);
 $(window).on('resize', resizeColumns);

DreamTeK · Answer 4 · 2014-03-14T13:42:19.693

0

This will make all column lefts equal all column rights:

JQUERY

var col1 = $(".double_column_left").height(),
    col2 = $(".double_column_right").height();
if (col1 > col2) {$(".double_column_right").height(col1); } else {
    $(".double_column_left").height(col2);
}

http://jsfiddle.net/qExTz/

edited Mar 14 '14 at 13:42

answered Mar 14 '14 at 13:37

DreamTeK

32,537
27
112
171

This would make all columns the same height, not only by pairs. – Oscar Paz Mar 14 '14 at 13:38
You are correct I misunderstood the question. – DreamTeK Mar 14 '14 at 13:42

How to set div height based on class of div next to it?

4 Answers4