Conformed Box Height

by Emily Humphrey

HTML

<div class="box-contain">
    <div class="box box-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id massa sagittis, posuere ipsum eu, commodo orci. Aliquam et felis quis diam consectetur ornare.</div>
    <div class="box box-2">Duis at lorem ut tortor rhoncus malesuada ut non enim. Nam in ullamcorper enim, in aliquam elit. Curabitur a nibh ultrices, scelerisque eros ut, accumsan augue. Pellentesque eget felis ut enim dignissim eleifend nec eget velit.</div>
    <div class="box box-3">Fusce ultrices sit amet odio at aliquam. Curabitur odio dolor, ornare semper massa vel, pharetra mattis arcu.</div>
</div>

<div class="box-contain">
    <div class="box box-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id massa sagittis, posuere ipsum eu, commodo orci. Aliquam et felis quis diam consectetur ornare.</div>
    <div class="box box-2">Duis at lorem ut tortor rhoncus malesuada ut non enim.</div>
    <div class="box box-3">Fusce ultrices sit amet odio at aliquam. Curabitur odio dolor, ornare semper massa vel, pharetra mattis arcu.</div>
</div>

<div class="box-contain">
    <div class="box box-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id massa sagittis, posuere ipsum eu, commodo orci. Aliquam et felis quis diam consectetur ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id massa sagittis, posuere ipsum eu, commodo orci. Aliquam et felis quis diam consectetur ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id massa sagittis, posuere ipsum eu, commodo orci. Aliquam et felis quis diam consectetur ornare.</div>
    <div class="box box-2">Duis at lorem ut tortor rhoncus malesuada ut non enim.</div>
    <div class="box box-3">Fusce ultrices sit amet odio at aliquam. Curabitur odio dolor, ornare semper massa vel, pharetra mattis arcu.</div>
</div>

CSS

*{
    font-family:sans-serif;
}
.box-contain{
    overflow:hidden;
}
.box{
    display:block;
    width:150px;
    padding:20px;
    margin:10px;
    background:#333;
    color:#fbfbfb;
    float:left;
}

JavaScript

$('.box-contain').each(function () {
    var box = $(this),
        boxes = $(this).find('.box'),
        boxPaddingTop = $(boxes).css('padding-top'),
        boxPaddingBot = $(boxes).css('padding-bottom'),
        boxMarginTop = $(boxes).css('margin-top'),
        boxMarginBot = $(boxes).css('margin-bottom'),
        boxHeight = $(box).height(),
        boxSum = parseFloat(boxHeight) - parseFloat(boxPaddingTop) - parseFloat(boxPaddingBot) - parseFloat(boxMarginTop) - parseFloat(boxMarginBot);  
    $(boxes).css("height", boxSum);
});