How to Create Side-by-Side Divs with Equal Widths Using CSS?

Side-by-Side Divs with Automatic Equal Widths Using CSS

To create child divs that automatically take equal widths within a parent div, harness the power of CSS's display: table property. This approach, while not supported by IE7, effectively achieves the desired result in modern browsers.

Solution:

1. Set the parent div to display: table and table-layout: fixed. This establishes a table-like structure.
2. Set the child divs to display: table-cell. This treats them as table cells, resulting in equal widths.
3. Adjust the width and height properties of the parent div as desired.

Example Code:

CSS:

#wrapper {
    display: table;
    table-layout: fixed;

    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
}

HTML:

<div>

Demo:

Visit the following JSFiddle links to see the solution in action:

• Three divs: http://jsfiddle.net/g4dGz/
• Two divs: http://jsfiddle.net/g4dGz/1/

The above is the detailed content of How to Create Side-by-Side Divs with Equal Widths Using CSS?. For more information, please follow other related articles on the PHP Chinese website!