Elegant solution to same height boxes

Question

I have three boxes in a row with different content in each. They are not the same height. Is there an elegant solution that does not involve absolute positioning to dynamically produce the same height on every box

I would prefer not to use max-height because it is not dynamic for the future.

Have you considered a [css solution](http://stackoverflow.com/a/4804706/142020)? — T0xicCode, Feb 01 '15 at 02:02
What do you mean by "boxes"? Are these boxes inline as columns, or stacked on top of each other? Please provide some sample code so I gain gain context to your problem. — rlbaxter, Feb 01 '15 at 02:09

score 2 · Answer 1 · answered Feb 01 '15 at 02:07

If you are targeting only modern browser's, the most elegant way to address this would be to use flexbox. For example:

<div style='display: flex; flex-direction: row; color: #fff;'>
    <div style='flex: 1; background:red;'>
        <p>Hi</p>
    </div>
    <div style='flex: 1; background:green'>
        <p>Hi</p>
        <p>Hi</p>
        <p>Hi</p>
        <p>Hi</p>
    </div>
     <div style='flex: 1; background:blue'>
        <p>Hi</p>
    </div>
</div>

http://jsfiddle.net/nofmdho4/1/

This is beautiful for the future! – Paige Feb 02 '15 at 04:45 — Paige, Feb 02 '15 at 04:45

score 1 · Accepted Answer · answered Feb 01 '15 at 02:04

You could use display table:

<div style='display: table; color: #fff;  width: 100%'>
    <div style='display: table-cell; background:red;'>
        <p>Hi</p>
    </div>
    <div style='display: table-cell; background:green'>
        <p>Hi</p>
        <p>Hi</p>
        <p>Hi</p>
        <p>Hi</p>
    </div>
     <div style='display: table-cell; background:blue'>
        <p>Hi</p>
    </div>
</div>

http://jsfiddle.net/nofmdho4/

score 0 · Answer 3 · answered Feb 01 '15 at 02:02

Try a table layout, like this:

#css-table {
  display: table;
}
#css-table .col {
  display: table-cell;
  width: 25%;
  padding: 10px;
}
#css-table .col:nth-child(even) {
  background: #ccc;
}
#css-table .col:nth-child(odd) {
  background: #eee;
}

<div id="css-table">
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="col">
    <p>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.</p>
  </div>
  <div class="col">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
  <div class="col">
    <p>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.</p>
  </div>
</div>

Elegant solution to same height boxes

3 Answers3