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

Question

<div class="section group">
<div class="col span_1_of_3 articleTeaserBoxColor">
<div class="test2n">
<div class="imgHolder"><img id="NewsArticle_2790_image" class="imgArtThumb" title="" alt="" src="artOne.png" /></div>
<div class="textHolder">
<div class="textHolderTop">Care on the Fast Track</div>
<div class="textHolderBottom">The National Cancer Institute</div>
</div>
</div>
</div>
<div class="col span_1_of_3 articleTeaserBoxColor">
<div class="test2n">
<div class="imgHolder"><img id="NewsArticle_2792_image" class="imgArtThumb" title=" alt="" src="artThree.png" /></div>
<div class="textHolder">
<div class="textHolderTop">Stay Connected</div>
<div class="textHolderBottom">tool for interacting with your provider and following your healthcare</div>
</div>
</div>
</div>
<div class="col span_1_of_3 articleTeaserBoxColor">
<div class="test2n">
<div class="imgHolder"><img id="NewsArticle_2791_image" class="imgArtThumb" title="" alt="" src="artTwo.png" /></div>
<div class="textHolder">
<div class="textHolderTop">Know When Antibiotics Work and When They Don't</div>
<div class="textHolderBottom">If you or your child has a virus, antibiotics will not help you or him/her</div>
</div>
</div>
</div>
</div>
CSS:
.imgArtThumb
{
max-width: 100%;
height: auto;
}
.imgHolder
{
float: left;
display: inline-block;
width: 43%;
padding-right: 2%;
height: 100%;
}
.textHolder
{
float: left;
display: inline-block;
width: 55%;
height: 100%;
}
.textHolderTop
{
width: 100%;
height: 48%;
text-align: left;
padding-bottom: 2%;
overflow: hidden;
}
.textHolderBottom
{
width: 100%;
height: 48%;
overflow: hidden;
text-align: left;
padding-bottom: 2%;
}
.test2n
{
text-align: left;
height: 95%;
width: 95%;
padding: 2%;
overflow: hidden;
}
.articleTeaserBoxColor
{
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
}
/* COLUMN SETUP */
.col {
display: block;
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
.span_1_of_3 {
width: 32.2%;
}
/* GROUPING */
.group:before, .group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 */
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
height: auto;
overflow: auto;
text-align: center;
width: 100%;
}
displays this:
How can I modify my CSS to ensure the three boxes (the one with the box shadow) height matches that of the box with the most text (The middle box should be the same height, but because of content it is shorter).
Any content within a box, which is less than the box with the most text, will have blank space, which is fine.
This is what I would like it to be:

Answer 1

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 2

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 3

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/

Answer 4

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