Turn Equal Height boxes with CSS

Original:http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

The following is my translation of the content, is based on my understanding of the article to paraphrase, you do not pick where the translation of the wrong, my purpose is to convey this CSS skills

Many web designers like to place two or more containers in parallel, and display the contents of each container in it, just like a cell in a classic table layout controls the position of several columns, or the contents of a container are centered or top aligned.
But you do not like to use table to achieve him, how to do? The implementation of a number of methods, according to the visual illusion, the use of JS control to make the height of the same, and the container overflow part of the hidden and column of the negative bottom boundary and positive internal patches combined method to solve the problem of the same column height.
In fact, there is a simple method, using Display:table, Display:table-row and Display:table-cell can be achieved, and the height of the small container will be adaptive to those highly relatively high, but IE does not support this property, We do not have to blame IE, I believe there will be some improvement in the future. Here I made a model.

First look at the structure of XHTML:

<div class= "equal" >
<div class= "Row" >
<div class= "One" ></div>
<div class= "both" ></div>
<div class= "three" ></div>
</div>
</div>

It's easy to read without an explanation, but here's a table structure, not very similar.

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Down is CSS:

. Equal {
display:table;
Border-collapse:separate;
}
. Row {
Display:table-row;
}
The. Row Div {
Display:table-cell;
}
. Row. One {
width:200px;
}
. Row.
width:200px;
}
. Row. Three {

}

Explain:

1.dispaly:table the layer. Equal as a block-level element in table table, that is, to use him as a table
2.border-collapse:separate; The border is independent, just like the table does not merge cells before
3.display:table-row the. Row as a table row TR display
4.display:table-cell; the subordinate div of the. Row is displayed as a table cell TD
5. Then define the width

border-spacing:10px is also used here to distinguish several boxes, as stated above, IE does not display normally, but in: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b , Camino 0.8b, and Netscape 7.1 have been tested for perfect display.

Turn Equal Height boxes with CSS