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>
  <p><strong>Example:</strong></p>
  <p>Check out this JSFiddle demonstration for both three and two divs scenarios:</p>
  <ul>
  <li>[Two divs](https://jsfiddle.net/g4dGz/1/)</li>
  <li>[Three divs](https://jsfiddle.net/g4dGz/)</li>
  </ul>
  </div>

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!