Javascript element offsetHeight returns returns 0 in for loop -

i trying dynamically height of child element inside 3 column grid.

when i equal 2 or when i greater 1 (i.e. when there @ minimum 2 elements inside loop), offsetheight returns rendered height correctly (i display rendered height value in dedicated $('#testheight') element checking.)

however when i equal 1, offsetheight returns 0, though rendered element has height (there <img> element rendered inside child element via php).

i cannot find error! please help!

function makegrid(){   var blocks = document.getelementbyid("grid_container").children;   var pad = 0, cols = 3, newleft, newtop;   var max_height = 0;   var newoffsetheight = 0;   for(var = 1; < blocks.length; i++){     if (i % cols == 0) {       newtop = (blocks[i-cols].offsettop + blocks[i-cols].offsetheight) + pad;       max_height = math.max(max_height, newtop + blocks[i-cols].offsetheight);       blocks[i].style.top = newtop+"px";       newoffsetheight = blocks[i].offsetheight;     }     else {       if(blocks[i-cols]){         newtop = (blocks[i-cols].offsettop + blocks[i-cols].offsetheight) + pad;         blocks[i].style.top = newtop+"px";       }       newleft = (blocks[i-1].offsetleft + blocks[i-1].offsetwidth) + pad;       blocks[i].style.left = newleft+"px";       newoffsetheight = blocks[i].offsetheight;     }   }   $('#testheight').html(newoffsetheight); } 

improved code, check out: https://jsfiddle.net/0otvhgkg/8/

function rendergrid(){ var blocks = document.getelementbyid("grid_container").children; var pad = 0, cols = 3, newleft var newtop = 0 var max_height = blocks.length ? blocks[0].offsetheight : 0;      for(var = 1; < blocks.length; i++){         if (i % cols == 0) {             newtop = (blocks[i-cols].offsettop + blocks[i-cols].offsetheight) + pad;                blocks[i].style.top = newtop+"px";           max_height = math.max(max_height, newtop + blocks[i].offsetheight);         } else {             if(blocks[i-cols]){                 newtop = (blocks[i-cols].offsettop + blocks[i-cols].offsetheight) + pad;                 blocks[i].style.top = newtop+"px";                 max_height = math.max(max_height, newtop + blocks[i-cols].offsetheight);             }             newleft = (blocks[i-1].offsetleft + blocks[i-1].offsetwidth) + pad;             blocks[i].style.left = newleft+"px";             max_height = math.max(max_height, newtop + blocks[i-1].offsetheight);         }   }     $('#grid_container').css('height', max_height); } window.addeventlistener("load", rendergrid, false); window.addeventlistener("resize", rendergrid, false); 

problem calculated max_height when new row created , didn't care first row whatsoever.