creating set of 'cells' that have a fixed width and aligned height - css

Question

I'm trying to basically blocks that are adjacent to each other and have a defined width. However, I want the height of the cells to line up with other cells in the row.
Please see the following codepen for the code to play around with:
http://codepen.io/thinkbonobo/pen/EKdxgP
.cm-table-frame {}
.table-frame-row {}
.table-frame-cell {
border: 1px solid lightskyblue;
/* display: table-cell; */
display: inline-block;
vertical-align: top;
width: 100px;
}
I've tried two methods:
display:table-cell - I like this method as it sets the height properly but I can't seem to figure out how to set the width.
display: inline-block - This method lets me easily set the width but I can't set the height to dynamically match the blocks in the line/row. some cells may have 1 line some cells may have 5 lines but they all should be the same height for a given row.
Your advice would be much appreciated!

Answer 1

if you want to use display: table-cell, the set the max-width and min-width:
.table-frame-cell {
border: 1px solid lightskyblue;
display: table-cell;
vertical-align: top;
min-width: 100px;
max-width: 100px;
}
or
if you want to use display: inline-block, you need to set the height of the elements:
.table-frame-cell {
border: 1px solid lightskyblue;
display: inline-block;
vertical-align: top;
width: 100px;
height: 100px;
}

Answer 2

It's generally adviseable not to use tables for layouts, and display:table-cell will validate fine, but in the end has the same issues (as also discussed in the provided link).
If using CSS Level 3 is not an issue, you can use flexboxes for this (Flexbox Browser Compatibility), like this:
.flex-container {
background-color: green;
display: flex;
}
.flex-container > div {
background-color: orange;
flex: 1;
padding: 15px 20px;
margin-right: 20px;
max-width: 120px;
}
<div class="flex-container">
<div>Very short text.</div>
<div>This is a lot of text, even though it's probably very little compared to what you're trying to do, as stack's preview window is comfortably narrow.</div>
<div>Another bit of text for flavor.</div>
</div>
The only solution that comes to mind that works in browsers without CSS3 implementation is to use Javascript or jQuery to set all boxes to the same height.

Answer 3

Option #1
(For old browsers support)
use display:table/table-cell along with width, something like this:
body {
margin: 0
}
.table {
width: 100%;
display: table;
}
.cell {
width: 25%;
display: table-cell;
}
.cell:nth-child(odd) {
background: red
}
.cell:nth-child(even) {
background: green
}
<div class="table">
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</div>
Option #2
(If you don't mind NOT supporting old browsers)
you can use CSS3 flexbox
body {
margin: 0
}
.table {
width: 100%;
display: flex;
}
.cell {
width: 25%;
flex:1
}
.cell:nth-child(odd) {
background: red
}
.cell:nth-child(even) {
background: green
}
<div class="table">
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
<div class="cell">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
</div>