How Can I Make Floating Divs Equal Height Using Only CSS?

Fixing Floating Div Height Discrepancies in HTML/CSS

In the realm of web development, a common challenge arises when working with floating divs: ensuring they align equally in height. This conundrum has often been addressed using HTML tables, but concerns about semantic correctness persist.

The preferred solution lies within the power of CSS. By implementing a specific combination of styles, we can achieve equal height floating divs:

1. Overflow Hidden: Wrap the divs within a parent div with overflow: hidden. This confines the divs within a designated area, preventing them from extending beyond their bounds.
2. Bottom Padding and Negative Margin: Apply generous bottom padding, such as 500em, to the divs. This creates a large virtual space below the divs.
3. Negative Bottom Margin: Add a negative margin equal to the padding value. This moves the divs upwards, essentially offsetting the padding.

The following CSS snippet exemplifies this approach:

#container {
  overflow: hidden;
  width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px;
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

By employing this technique, we can ensure that floating divs automatically adjust their heights to match the highest content, creating a pleasing visual consistency.

The above is the detailed content of How Can I Make Floating Divs Equal Height Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!