javascript - Set height of 3 elements, taking largest value, across multiple rows -

i have layout of divs floating left, column count of 3. inside these layers text varying length, such layers @ different heights , not aligning correctly , not looking borders not match in height.

i set fixed height divs leave huge white space on rows have wrote jquery take largest value of divs , set heights height line correctly. script is:

var sectionheight = new array(); //set empty array $(".section-title").each(function () { //get div elements     var value = $(this).height(); //get div height     sectionheight.push(value); //write height array }); var newsectionheight = math.max.apply(math, sectionheight); //get largest value in array $('.section-title').height(newsectionheight); //set height of elements largest 

this works fine in design rows have 1 line of text , adjusting row big top row 5 lines of text.

what trying achieve have take first 3 divs, largest value set 3 div heights value. repeat 4th 6th div , on (as divs in columns of 3)

i can long winded solution $(".section-title").eq(2) can imagine not ideal way of doing it.

any advice appreciated

edit example of divs (css not visible in html, example):

<div style="width: 100%;">     <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text , longer title other rows</div>     <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text</div>     <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text not long</div>     <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text</div>     <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">short text</div>     <div class="section-title" style="width: 30%; margin-right: 5px; float: left;">some text</div> </div> 

try

var $sections = $('.section-title');  $sections.filter(':nth-child(3n-2)').each(function () {     var $this = $(this),         $els = $this.nextall(':lt(2)').addback();      var sectionheight = new array();     $els.each(function () {         var value = $(this).height();         sectionheight.push(value);     });     var newsectionheight = math.max.apply(math, sectionheight);     $els.height(newsectionheight); }) 

demo: fiddle