Dynamic Equal Height Columns with Pure Javascript

Dynamic equal height columns that account for padding and borders.

Demo

Js

//Dynamic Equal Height Columns *Pure JS
function eqHeight(parent_id) {
	var child = document.getElementById(parent_id).childNodes, childAmount = child.length, boxHeight = 0;
    // Find the greatest height
	for(var i = childAmount - 1; i >= 0; i--) { 	
        if(child[i].offsetHeight && child[i].offsetHeight > boxHeight) {
            child[i].style.height = '';
            boxHeight = child[i].offsetHeight;
        }
	}
	// Apply the greatest height to all child elements while accounting for padding and borders
	for(var i = childAmount - 1; i >= 0; i--) { 	
		if(child[i].offsetHeight) {
			child[i].style.height = boxHeight + 'px';
		}
        if(child[i].offsetHeight > boxHeight) {
            child[i].style.height = boxHeight - (child[i].offsetHeight - child[i].clientHeight) + 'px';
            child[i].style.height = boxHeight - ((child[i].offsetHeight - boxHeight) + (child[i].offsetHeight - child[i].clientHeight)) + 'px';
        }
	}
}
window.onload = function() { eqHeight('object_group'); }
window.onresize = function() { eqHeight('object_group'); }

CSS

#column1 {
    float:left;
   width:40px;
   height:auto;
   border:1px solid #444;
   border-top:7px solid #444;
   margin:0 5px 0 5px;
    
}
#column2 {    
    float:left;
   width:40px;
   height:auto;
   border:1px solid #444;
   border-bottom:20px solid #444;
   margin:0 5px 0 5px;
    
}
#column3 {
    float:left;
   width:40px;
   height:auto;
   border:1px solid #444;
   margin:0 5px 0 5px;
   padding: 5px;
}
#column4{
    float:left;
    width:40px;
    height:auto;
    border:1px solid #444;
    border-top:4px solid #444;
    margin:0 5px 0 5px;
}

Markup

<div id='object_group'>
    <div id='column1'>
        text text text text text text text 
    </div>
    <div id='column2'>
        text text text text text text text text text text text text text text text text text text text text 
    </div>
    <div id='column3'>
        text text text text text text text text text text text 
    </div>
    <div id='column4'>
        text text text text text text text text text 
    </div>
</div>

Source