How to make div boxes with floats have the same height with dynamic content

Question

In tables, if you have a row, that row is the same height and all cells in the row grow and shrink with dynamic content. (If one cell has a ton of text and the other cells not much they are all the same height, letting you make columns and rows).

With the popularity of div float layouts using tables is often frowned upon. However how do I duplicate this and other functionality and benefits of a table while still keeping the display set to block for the benefits of a block, cross browser?

I've seen many hacks but they always seem to be too complicated, interfere with each other, or take tweaking. I am looking for a standard reliable method for the following:

Make div boxes the same height across a row with a wrapping container

<style>
    .cell { float:left; }
</style>
<div class="row">
    <div class="cell">Content 1 with more width</div>
    <div class="cell">Content 2<br>with<br>more<br>height<br>Content 2<br>Content 2<br></div>
    <div class="cell">Content 3</div>
</div>

In this case all div's of class "cell" will have the same height, and not be fixed height at all and be floated and will stay that way for dynamic content of any size.

Vertically center content

In this case using the example above, all content would be vertically aligned to the middle, for dynamic content of any size.

Make div's of class "cell" share a common width that is based on the wrapper "row"

In a table when you specify width as 100% or fixed width the cells will automatically try to all be the same width, unless an image or block like item prohibits this. How can this be achieved with floating divs? As if you say, float all "cell" to the left, you can specify a min width or a fixed width, but I know of no way to make them share a common width that is dynamic, like a table. In floated divs by themselves they shrink to the size of the content.

How to avoid content pushing against the container/wrapper "row" and treat it as if it were just a block

For whatever reason when a floating div is inside a wrapper you can get odd behavior where content will "stick" to the wrapper as if were floating too. Even sometimes when using a <br style="clear:both"> at the end I had this happen.

If you could answer all these questions about floating divs for me it is most appreciated. Please don't tell me to break this into separate questions as they are all related to the same thing. Please don't tell me this would be better asked somewhere else. If however you wish to be helpful great :)

If the solution is using display:table-cell alone, I've tried this, it makes the divs not behave as a block, shrinking it, the background shrinks to the content too, and in other ways it does not behave as a block. Also some versions of IE do not support this and I am looking for a cross browser solution. Thank you.

Answer 1

If you want your div elements to behave like table cells, you can style them that way:

.row {
  display: table;
  width: 100%;
}
.cell {
  display: table-cell;
  width: 33.33%;
  vertical-align: middle;
  text-align: center;
}​

This does not rely on setting a height or min-height on the .cell elements, so the height will remain flexible.

--- jsFiddle DEMO ---

Answer 2

Well, I went the jQuery route... http://jsfiddle.net/dtgEt/1/

I would like to point out that while yes, some people will just use a table, a table is for displaying tabular data, not layout. A div has no semantic meaning and therefor is a better choice, in my opinion (unless it is actually tabular data that your are publishing to the web).

My solution works in IE 7 and probably would in IE 6. If you want to align your content in the center of the container there are many good ways to do that others have suggested (beat me to it).

Answer 3

You may apply the CSS like this;

.row{
    height: 200px;
}
.cell{
    display:block;
    float:left;
    height:100%;
}

Here is a working Live Demo.

and Here is a workaround to distribute the columns also.

Hope this helps

Note: DO NOT add percentage attribute to child div s to fill parent div (for example 50% each for 2 child divs, 25% for 4 child divs etc) since these vary according to number of divs and cannot be calculated accurately sometimes

Answer 4

If you need the formatting of a table, but you have to support older browsers that don't have support for display:table , then use a table. It's pretty much that simple.

Sometimes a table is the appropriate option, and sometimes it's the only option that will work without adding some moderately-risky JS or jQuery to simulate the formatting of a table.

For instance, a table (or display:table , which amounts to the same thing) is the only natural way to have true vertical centering of dynamic content. It's also the only natural way to enforce equal-height columns for dynamic content. And in general, a table is appropriate anytime you need to display a data grid of some sort.