CSS Tips! Layout div like table

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 {

width:200px;

}

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.

The above problem is that this model for IE is equivalent to garbage, so basically can only be done to play, no practical use, now I want to do is, so it can also be better under IE display, so I did a second model

XHTML structure similar to the first model just adds a new div to IE

<div class= "equal" >
<div class= "Row" >
<div class= "One" ></div>
<div class= "both" ></div>
<div class= "three" ></div>
<!--[If ie]>
<div class= "Ieclearer" ></div>
<! [endif]-->
</div>
</div>

Add a judgment to XHTML, judge whether IE, and then give IE a special treatment, in IE display and other browser different code, for this judgment Ie\mac preferred to display the content in the meantime.

Then in the CSS also added a judgment, with XHTML, with floating alignment (floating alignment without explanation) way to achieve the container of the same side, but still can not be true to achieve the high, you can add the background color of the visual illusion to achieve the visual high, or use other methods, There is no explanation here.

Here is the code in the CSS

<!--[If ie]>
<style type= "Text/css" media= "All" >
. Equal,. Row {
Display:block;
}
. Row {
padding:10px;
}
The. Row Div {
Display:block;
Float:left;
margin:0;
}
. Row.
margin-left:10px;
}
. Row. Three {
width:160px;
Float:right;
}
. ieclearer {
Float:none;
Clear:both;
height:0;
padding:0;
font-size:2px;
line-height:0;
}
</style>
<! [endif]-->

To this, the whole design is really complete, although not perfect, to non-IE and make efforts to appear a bit redundant, now either IE support the first model, or we may come up with a better solution. But this is a worthwhile attempt.

CSS Tips! Layout div like table