Layout div_css/html like table

Source: Internet
Author: User
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:







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









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.

At this point the whole task is over.
  • Related Article

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.