Can't get DIV's equal in height - html

Question

As simple as it normally is, for some reason I can't seem to get the same column heights for three divs in a row without using min-height or jQuery.
I am trying to use display:table on the main div and display:table-cell on the child's. I have no clue what is going wrong. I also tried other solutions, e.g. display:inline-block; and :before { content:"" }; as suggested in several other posts.
<div class="row">
<!-- 3 times in a row, other two blocks cut here for overview on SO -->
<div class="columns small-12 medium-4 large-4">
<div class="highlighted-contentblock">
<a href="#" target="_blank">
<div class="contentheader">
<div class="sequence">
1
</div>
<h2>
Lorem ipsum
</h2>
</div>
Lorem
</a>
</div>
</div>
</div>
Fiddle
.large-4 {
width: 33.33333%;
display:table; }
.highlighted-contentblock
{
background:gray;
display:table-cell;
}
Fiddle

Answer 1

The Problem
It looks like the original issue was trying to apply table-cell to the class highlighted-contentblock instead of columns. The columns class is the first child of your row class and table-cell should be applied there.
Columns
You had display table on your columns (applied on the highlighted-contentblock class). I replaced that with table-cell applied to the columns class.
Spacing
Float removes margin so I removed that and used border spacing on your table instead.
Support
This works but not in IE 7. CSS tricks has more info.
Click run code snippet below to see it in action.
/* Foundation replacement */
.row {
padding-bottom:10px;
max-width:980px;
margin:0 auto;
display:table;
border-spacing:0.9375rem;
}
.columns {
box-sizing:border-box;
display:table-cell;
background:gray;
}
.large-4 {
width: 33.33333%;
}
<div class="row">
<div class="columns small-12 medium-4 large-4">
<div class="highlighted-contentblock">
<a href="#" target="_blank">
<div class="contentheader">
<div class="sequence">
1
</div>
<h2>
Lorem ipsum
</h2>
</div>
Lorem
</a>
</div>
</div>
<div class="columns small-12 medium-4 large-4" data-equalizer-watch="">
<div class="highlighted-contentblock">
<a target="_blank" href=#>
<div class="contentheader">
<div class="sequence">
X
</div>
<h2>
Lorem ipsum <br/> Lorem ipsum
</h2>
</div>
Lorem ipsum</a>
</div>
</div>
<div class="columns small-12 medium-4 large-4" data-equalizer-watch="">
<div class="highlighted-contentblock">
<a target="_blank" href=#>
<div class="contentheader">
<div class="sequence">
3
</div>
<h2>
Lorem ipsum
</h2>
</div>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</a>
</div>
</div>
</div>

Answer 2

Your html is a bit messy to be honest. You want to be following this simple structure:
<div class="row">
<div class="col">Content</div>
<div class="col">Content</div>
<div class="col">Content</div>
</div>
And then set a few simple CSS rules
.row {
display: table;
}
.col {
display:table-cell;
width:33.33%;
}
The crucial thing here is setting the width of your table cells.
I have updated your fiddle to show this in action
http://jsfiddle.net/eaqr1b17/5/

Answer 3

For your markup you have do to it like this:
http://jsfiddle.net/rvos3hx3/
/* Foundation replacement */
.row {
padding-bottom:10px;
max-width:980px;
margin:0 auto;
display:table;
}
.columns {
position: relative;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
box-sizing:border-box;
background:gray;
display:table-cell;
}
.large-4 {
width: 33.33333%;
}

Answer 4

I think this is what you need:
HTML:
<div class="wrap">
<div class="row">
<div class="cell">
Lorem
</div>
<div class="cell">
Lorem impsum more text
</div>
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
And for the css:
.wrap{
overflow:hidden;
width:250px;
display: table;
border-collapse: collapse;
}
.row {
display: table-row;
}
.cell{
width: 33.33%;
display: table-cell;
background-color: #0f0;
}
if you want to see it running click here
Fiddle

Answer 5

Here is a jsfiddle : http://jsfiddle.net/nrnLbv14/
HTML :
<div class="container">
<div class="row">
<div class="column">content 1</div>
<div class="column">content 2</div>
<div class="column">content 3</div>
</div>
</div>
CSS :
.container {
display:table;
/* just styling to show it works */
border-collapse: separate;
border-spacing: 10px;
background-color: gray;
}
.row {
display:table-row;
}
.row .column {
display:table-cell;
background-color: #fff;
width: 33.33%; // If you want all 3 columns equal width
}

Answer 6

With floated element, the table/table-cell rendering is a bit difficult to render correctly...
If you can, remove the float element, and display them side by side with the table-cell.
The second problem of your code is that you have a background on the child element of the one that is rendered with a table-cell. So the height of all .column elements will be the same, but you won't see it with the background-color, because that property is setted to the child element that has its own height...
Here is an update of your fiddle without the float and with a border to show you that the height is correctly setted, but you don't see it because your bg-color is not applied to the right element :
http://jsfiddle.net/eaqr1b17/6/
/* Foundation replacement */
.row
{
padding-bottom:10px;
display:table;
border: 1px solid red;
}
.columns {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
box-sizing: border-box;
display: table-cell;
border: 1px solid green;
}
.large-4 {
width: 33.33333%;
}
.highlighted-contentblock
{
background:lightgrey;
}