How to Make Side-by-Side Divs Have Equal Widths in CSS?

Equal Widths for Side-by-Side Divs in CSS

In HTML, organizing elements within a parent container is often achieved using div elements. However, aligning multiple child divs side by side with equal widths can pose a challenge.

Consider the following HTML structure:

<div>

In this example, the child divs are aligned side by side, but they have arbitrary widths. To achieve equal widths, one can employ CSS magic using the display: table property.

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

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

This CSS solution has several key features:

• Sets the parent div (#wrapper) to display as a table (display: table) and sets table-layout: fixed to ensure equal column widths.
• Sets the child divs (#wrapper div) to display as table cells (display: table-cell) with equal heights.

Benefits:

• Works in modern browsers (IE7 is not supported)
• Automatically adjusts column widths based on available space
• Allows for flexible layouts with varying numbers of child divs

Live Examples:

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

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