Equal Heights

by Laurie

HTML

<script src="https://cdn.rawgit.com/filamentgroup/jQuery-Equal-Heights/master/jQuery.equalHeights.js"></script>
<div id="timeline">
<div id="approvals">Approvals
    <ul>
        <li>1asdfdf sf</li>
        <li>dfdfdfdf sf</li>
        <li>1assd asdfa d dfrghf dfdf sf</li>
        <li>1asdsdfsdf sdfsdf sf</li>
    </ul>
</div>
<div id="Materials">Materials
    <ul>
        <li>1asdfdf sf</li>
        <li>dfdfdfdf sf</li>
        <li>1assd asdfa d dfrghf dfdf sf</li>
        <li>1asdsdfsdf sdfsdf sf</li>
        <li>dfdfdfdf sf</li>
        <li>dfdfdfdf sf</li>
        <li>dfdfdfdf sf</li>
        <li>dfdfdfdf sf</li>
        <li>1assd asdfa d dfrghf dfdf sf</li>
        <li>1assd asdfa d dfrghf dfdf sf</li>
        <li>1assd asdfa d dfrghf dfdf sf</li>
        <li>1assd asdfa d dfrghf dfdf sf</li>
    </ul>
</div>
<div id="exams">Exams
    <ul>
        <li>1asdfdf sf</li>
        <li>dfdfdfdf sf</li>
        <li>1assd asdfa d dfrghf dfdf sf</li>
        <li>1asdsdfsdf sdfsdf sf</li>
    </ul>
</div>
<div id="bonuses">Bonuses
    <ul>
        <li>1asdfdf sf</li>
        <li>dfdfdfdf sf</li>
        <li>1assd asdfa d dfrghf dfdf sf</li>
        <li>1asdsdfsdf sdfsdf sf</li>
        <li>dfdfdfdf sf</li>
        <li>dfdfdfdf sf</li>
    </ul>
</div>
    </div>

CSS

div {
    float:left;
    border:2px #000000 solid;
    margin-left:15px;
    padding:5px;
}

JavaScript

(function($){
    $.fn.eqh = function(minH,maxH){
        var max = minH || 0;
        this.each(function(){
            var h = $(this).height();
            max = (max < h)?h:max;
        });
        if( (maxH) && max > maxH ){
            max = maxH;
        }
        return this.each(function(){
            $(this).height(max);
        });
    }
})(jQuery)
    
$('#timeline div').eqh();