How to ensure three DIV are the same height regardless of content

Answer 1

This is how I do this (as of this date)

http://jsfiddle.net/sheriffderek/ae2sawnn/

HTML

    

        

            
                

                    
                
                

                    
Might as well have the whole thing a link and not just that little bitty part of a sentence... etc... etc...
                
            
        

        

            {{ ... }}
        

        

            {{ ... }}
        

    

 

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

.your-section {
    width: 100%;
    float: left;
}

.block-list {
    width: 100%;
    float: left;
    list-style: none;
    margin: 0; padding: 0;
}

.block {
    width: 100%;
    float: left;
    padding: .5rem;
    margin-bottom: 1rem;

    border: 1px solid red;
}

.block a {
    display: block;
}

.image-w {
    width: 100%;
    float: left;
}

.image-w img {
    display: block;
    width: 100%;
    height: auto;
}

.text-w {
    width: 100%;
    float: left;
}


@media (min-width: 600px) {

    .block {
        width: 33%;
        margin-bottom: 0;
    }

} /* end break-point 1 */

JS

// resources
// http://stackoverflow.com/questions/14167277/equal-height-rows-for-fluid-width-elements

// @popnoodles 's answer on S.O. 

$.fn.extend({

    equalHeights: function(){

        var top = 0;
        var row = [];
        var classname = ('equalHeights'+Math.random()).replace('.','');

        $(this).each(function(){

            var thisTop = $(this).offset().top;

            if ( thisTop > top ) {

                $('.'+classname).removeClass(classname); 
                top = thisTop;

            }

            $(this).addClass(classname);

            $(this).outerHeight('auto');

            var h = (Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get()));

            $('.'+classname).outerHeight(h);

        }).removeClass(classname);
    }      
});

$(function(){ // call the function
  $(window).resize(function() {
    // on resize... but also... trigger that once by default right off the bat
    $('.block').equalHeights();
  }).trigger('resize');
});