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

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!

score 2 · Accepted Answer · answered Apr 27 '16 at 16:50

2

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

answered Apr 27 '16 at 16:50

Running Buffalo

1,243
2
9
17

This is the most straightforward approach without using flexbox. Also consider using 'overflow: hidden', and if you want to restrict line-wrapping you can use 'text-overflow: ellipsis' along with 'white-space: nowrap' – Mark Apr 27 '16 at 17:24
@Buffalo thanks! I think i'm going to use your option. I like how this option doesn't require me setting the table width. Though others viewing this post, if you want something less hacky but also less compatible, use flexbox as you can see in the other answers below. – ThinkBonobo Apr 27 '16 at 17:55

score 1 · Answer 2 · answered Apr 27 '16 at 16:56

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.

score 1 · Answer 3 · answered Apr 27 '16 at 16:57

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>

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

3 Answers3

Option #1

Option #2