How to Create Equal-Height Floating Divs with Pure CSS?

Creating Equal-Height Floating Divs in HTML/CSS

When working with floating divs, it can sometimes be challenging to maintain equal heights between divs. While a table can be a simple solution, it might not always be semantically appropriate. Fortunately, there are pure CSS techniques to achieve this.

One approach is to apply bottom padding and a negative bottom margin to the divs. The padding creates the appearance of a vertical space, while the margin counteracts this padding. This can be leveraged to create equal-height columns.

Additionally, wrapping the divs in a parent container with overflow: hidden can prevent content from overflowing outside the container. This helps maintain the vertical alignment.

To vertically center text within the divs, consider using line-height or flexbox techniques. For instance, setting line-height to a large value or using flexbox and aligning items to the center can help achieve vertical alignment.

The code sample below demonstrates this technique:

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

This approach provides a clean and semantically appropriate way to create equal-height floating divs in HTML/CSS.

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