How to Create Equal Width Divs with CSS?

Equal Width Divs with CSS

In this scenario, a parent div contains multiple child divs, and you want them to have equal widths automatically.

Solution:

Utilize the power of display: table and table-layout: fixed CSS properties. This technique works in modern browsers but not in IE7.

• CSS:

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

• HTML:

  <div>

Example:

Check out this JSFiddle demonstration for both three and two divs scenarios:

• [Two divs](https://jsfiddle.net/g4dGz/1/)
• [Three divs](https://jsfiddle.net/g4dGz/)

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