CSS div length equal to several ways

For layout schema:
#outer {
 overflow:hidden;
}
#outer. panel{
 float:right
 width:286px;
 padding-left:21px;
 border-left : 1px solid #E5E3D7;
 padding-bottom:27670px!important;
 margin-bottom: -27670px!important;
}
#outer. main{
 float:left
 width:510px;
 padding-bottom:27670px!important;
 margin-bottom: -27670px!important;
}
JS code for the table:
<SCRIPT>
Function div () {
 var l= document.getElementById ("Div1"). getElementsByTagName ("Li");
 var num=4;
 var I=l.length/num;
 for (var a=0;a<i;a++)
 {
  var max=l[num*a].scrollheight;
  var kk=num*a;
& nbsp var dd=num*a;
  for (kk;kk<l.length;kk++)
  {  
   if (max<l[kk].scrollheight)
& nbsp;  {
    Max=l[kk].scrollheigHt
  }  
   if (kk==num* (a+1)-1)
   break;
 }
  for (dd;dd<l.length;dd++)
  {
   l[dd].style.height=max+ "px";
   if (dd==num* (a+1)-1)
   Break
 } 
 
}
</script>
PS: calling div inside Div () repeats the 4-column loop inside the Li!