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

Question

In tables, if you have a row, that row has the same height, and all cells in the row grow and are compressed by dynamic content. (If one cell has a ton of text and the other cells are not many, they are the same height, allowing you to create columns and rows).

With the popularity of spread spreads, divs using tables are often frowned upon. However, how do I duplicate this and other functionalities and advantages of the table, while maintaining the display set to block the advantages of the block, cross-browser?

I saw a lot of hacks, but they always seem too complicated, interfere with each other or tune. I am looking for a standard reliable method for the following:

Make div fields of equal height in line with container 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 divs of the "cell" class will have the same height, and not be a fixed height at all and will float and will remain that way for dynamic content of any size.

Vertically central content

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

Make a div from the cell class a common width that is based on the string shell

In the table, when you specify the width as 100% or a fixed width, the cells will automatically try to use the same width if this does not prohibit the image element or block. How can this be achieved with floating divs? As if you are saying, float the entire “cell” to the left, you can specify a minimum width or a fixed width, but I don’t know how to make them common dynamics, such as a table. In floating divs, they reduce the size of the content.

Avoiding content clicking on the container line of the container / shell and treating it as if it were just a block

For some reason, when the floating div is inside the wrapper, you can get odd behavior when the content will “stick” to the wrapper, as if they were floating too. Even sometimes when using <br style="clear:both"> in the end I had it.

If you could answer all these questions about floating divs for me, then this is most appreciated. Please do not tell me to break this into separate questions, since they are all related to the same thing. Please do not tell me that it is better to ask somewhere else. If, however, you want to be very helpful :)

If the solution uses only display:table-cell , I tried this, it causes the divs to not behave like a block, reducing it, the background is also compressed to the contents, and in other ways it does not behave like a block. Also, some versions of IE do not support this, and I'm looking for a cross browser solution. Thanks.

Answer 1

If you need to format the table, but you need to support older browsers that do not have display:table support, then use the table. It is pretty simple.

Sometimes a table is a suitable option, and sometimes it is the only option that will work without adding some moderate-risk JS or jQuery to simulate table formatting.

For example, a table (or display:table , which is the same thing) is the only natural way to have true vertical centering of dynamic content. This is also the only natural way to force align columns with the same height for dynamic content. In general, a table is suitable at any time when you need to display a data grid of some type.

Answer 2

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

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

It does not depend on setting the height or min-height of the .cell elements, so the height will remain flexible.

--- jsFiddle DEMO ---

Answer 3

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

I would like to point out that although yes, some people just use a table, the table is designed to display tabular data, not a layout. The div has no semantic meaning, and therefore it is the best choice, in my opinion (unless it is the actual tabular data that you publish on the Internet).

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

Answer 4

You can apply CSS as follows:

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

Here is a live demo in real time.

and Here is a workaround for distributing columns.

Hope this helps

Note. DO NOT add a percent attribute to the child of the div to populate the parent div (e.g., 50% for two child divs, 25% for 4 child divs, etc.), because they differ depending on the number of divs and cannot be calculated exactly sometimes