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?

@3rror404 Thanks for linking to that, although that is more CSS based rather than Javascript as I'm trying to work with. — user3420034, Mar 14 '14 at 13:54
look at the answers with 4 up-votes if non of the below are useful — Turnip, Mar 14 '14 at 14:04
@3rror404 I've ended up going with the flexbox solution on that other post, as it happened to solve a few other issues I was having as well as this issue. — user3420034, Mar 14 '14 at 14:16

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

31,487
5
43
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

29,809
22
103
157

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