javascript - How to make a list of elements on 2 columns with equilibrated height? -

i have list of articles have presented on 2 columns.

everything ok except height of articles different , result can have column lot more longer other one.

it’s not big issue result not clean. can see picture attached see.

it’s because, before make loop, count articles , divide result 2 :

this code (a little bit more complicated in template it’s html stuff)

// make query number of articles $count_articles = 20; $i = 0;  if ($i == 0) {     echo '<div class="column_1">'; }  if ($i <= 10) {     echo '<div style="float:left;width:350px;">';     echo $articles     echo '</div><div style="clear:both;"></div>';     $i++; }  if ($i == 11) {     //close column_1, open column_2     echo '</div><div class="column_2">'; }  if ($i >= 11 && $i <= 20) {     echo '<div style="float:right;width:358px">';     echo $articles     echo '</div>';      if ($i ==20) {         //close column_2         echo '</div>';         }     $i++; } 

do know way height of articles before make loop or other way (with javascript maybe) ?

so put jquery. needs bit of work fit situation, basic idea seems work well.

so have <div> articles in. <div> each column. this:

<div id="col1"></div> <div id="col2"></div> <div id="temp">     <!--articles here--> </div> 

i use jquery loop through each article, check height of each column , append() article shortest column.

$( document ).ready(function() {      $( ".article" ).each(function( index ) {         var col1height= $("#col1").height();         var col2height= $("#col2").height();          if(col1height < col2height){             $("#col1").append($(this));         }else{             $("#col2").append($(this));         }     });  }); 

this should make columns in height, without effort. i'm sure there's other ways make columns closer in height, say, think nice simple solution.

the jsfiddle here: http://jsfiddle.net/4kplr/1/