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

CSS Side-by-Side Divs with Equal Auto Widths

Achieving equal auto widths for child DIVs within a parent DIV can be tricky with traditional float and width approaches. However, using the display: table property provides a modern solution that enables this functionality.

Solution using Display: Table

1. Set the parent DIV (#wrapper) to display as a table and enable a fixed table layout. This will ensure that child DIVs occupy equal widths.
2. Set the height of the parent DIV to specify the vertical space available.
3. For each child DIV, set the display property to table-cell to ensure they appear side-by-side and have the same height as the parent DIV.

CSS Example:

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

#wrapper div {
  display: table-cell;
  height: 100px;
}

HTML Example:

<div>
<p><strong>Note:</strong></p>
<ul>
<li>This solution is not compatible with IE7 and below.</li>
<li>The provided JSFiddle examples demonstrate both three and two equal-width child DIVs.</li>
</ul>
</div>

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