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

Answer 1

Are Flexbox or jQuery possibilities? As others have mentioned the only pure CSS way (at the moment) is via table-cell which I'm not a huge fan of.

If jQuery is possible there's a fairly simple script I use to make heights match:

CSS:

.item{
  float: left;
  width: 280px;
}

jQuery:

// Set 'x' number of items to the tallest height
var tallestBox = 0;

$(".item").each(function() {
  var divHeight = $(this).height();

  if (divHeight > tallestBox){
    tallestBox = divHeight;
  }
});

// Apply height & add total vertical padding
$(".item").css("height", tallestBox + 30);

Or if Flexbox is possible (modern browsers) this is crazy easy now:

CSS:

.contain{
  display: flex;
  flex-direction: row;
}

Answer 2

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

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

HTML

<section class="your-section">

    <ul class="block-list">
        <li class="block">
            <a href="#">
                <div class="image-w">
                    <img src="http://placehold.it/1600x900" alt="your-image" />
                </div>
                <div class="text-w">
                    <p><strong>Might as well have the whole thing a link</strong> and not just that little bitty part of a sentence... etc... etc...</p>
                </div>
            </a>
        </li>

        <li class="block">
            {{ ... }}
        </li>

        <li class="block">
            {{ ... }}
        </li>

    </ul>

</section> <!-- .your-section -->

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');
});

Answer 3

There are several ways and methods, but here's a quick one:

.col {
    display: table-cell;
    vertical-align: top:
}

Demo http://jsfiddle.net/Lg9y9s93/1

Answer 4

You can use pseudo table layout: http://jsfiddle.net/8rvdkyke/

.content {
    display: table;
    width: 400px;
}

.content > div {
    display: table-cell;
    height: 100%;
    vertical-align: top;
}

This listing of code is emulating behavior of table layout causing all children div's to be the same height. You can tweak the sizes and other styles for your needs.

UPD: For responsive layout out, you can switch between table-cell and table-row to make them arranged horizontally (table-cell) and vertically (table-row): http://jsfiddle.net/8rvdkyke/1/