Adding the height of one onto another

Question

So I have this code which is to find the tallest of three divs, take its height and use that height to set the parent div, this works perfectly, but now I need to add more on top of that for another div, there will be a div under the 3 others which sit next to each other called #specification-bottom - I need to add the height of that to #specification:

$(window).on('load resize',function(){
    var maxHeight = -1;
    $('.specification-columns').each(function() {
        maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    });
    $('#specification').each(function() {
        $(this).height(maxHeight+24);
    });
});

Here is a demo of it: http://zimxtrial.ukbigbuy.com/ It is in the specification section and you will see that currently, #specification-bottom sits behind the other 3, once I add the height of that to the parent it will all fit nicely, or so I hope.

Answer 1

Try this:

$(window).on('load resize',function(){
    var maxHeight = -1;
    $('.specification-columns').each(function() {
        maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
    });
    maxHeight += $('#specification-bottom').height(); // new line
    $('#specification').each(function() {
        $(this).height(maxHeight+24);
    });
});