0

How to put equal heigts on each multiple divs?

<div class="brands">
    <div class="left" style="height:50px;">different height 1 same group</div>
    <div class="right" style="height:50px;">different height 2 same group</div>
</div>
 <div class="brands">
    <div class="left" style="height:150px;">different height 3 same group</div>
    <div class="right" style="height:150px;">different height 4 same group</div>
</div>

Many thanks.

Jānis Donis
  • 3
  • 1

1 Answers1

1

If you want them all the same:

$('div.brands').children('div').css('height', '100px');

Or, if different ones need different heights:

$('div.brands').eq(0).children('div').css('height', '50px');
$('div.brands').eq(1).children('div').css('height', '150px');

To set child divs to the height of the tallest child div in a given brands div:

var leftHeight = 0;
var rightHeight = 0;
$('div.brands').each(function() {
    leftHeight = $(this).children('div.left').height();
    rightHeight = $(this).children('div.right').height();
    if(leftHeight > rightHeight) {
        $(this).children('div.right').css('height', leftHeight + 'px');
    }
    else {
        $(this).children('div.left').css('height', rightHeight + 'px');
    }        
});
  • But how to set height on automaticaly? style attr is for example, for group spliting, for better understanding my problem. – Jānis Donis Apr 25 '13 at 12:41
  • I'm not sure what you're asking...? –  Apr 25 '13 at 12:42
  • Brands divs ar multiple, for example 50 divs. – Jānis Donis Apr 25 '13 at 12:43
  • For example here: http://stackoverflow.com/questions/11688250/setting-equal-heights-for-divs-with-jquery – Jānis Donis Apr 25 '13 at 12:43
  • So you want to set all the divs to the height of the tallest div? Because that's what that question asks and answers, as far as I can tell –  Apr 25 '13 at 12:46
  • Updated it with code to make all divs the height of the tallest div –  Apr 25 '13 at 12:50
  • Fixed it - changes height of child divs of div.brands divs –  Apr 25 '13 at 13:00
  • And how to set only children divs? Here is image example of problem: http://www.styleweb.lv/height_fix.jpg – Jānis Donis Apr 25 '13 at 13:06
  • This will only select and change child divs - it won't select div.brands divs –  Apr 25 '13 at 13:08
  • And how to set on child divs, like on picture example? This solution for all divs dont fix the problem. – Jānis Donis Apr 25 '13 at 13:18
  • I think I finally have what you wanted - to set the left and right divs in a given brands div to the same height –  Apr 25 '13 at 13:34
  • Almost right, but code example don't work. Console shows nothing. – Jānis Donis Apr 25 '13 at 13:40
  • Try it now - fixed the CSS setting function –  Apr 25 '13 at 13:48
  • Many thanks. All work good. Only need fixing padding height issue with css. – Jānis Donis Apr 25 '13 at 14:03
  • Here is update "if(leftHeight > rightHeight) { $(this).children('div.brands_stats').css('height', leftHeight + 'px'); $(this).children('div.brands_info').css('height', leftHeight + 'px'); } else { $(this).children('div.brands_info').css('height', rightHeight + 'px'); $(this).children('div.brands_stats').css('height', rightHeight + 'px'); } " – Jānis Donis Apr 25 '13 at 14:17