How to Make Two Floating Divs the Same Height with CSS?

Equal Height Floating Divs Using CSS

You want to achieve two floating divs that share the same height and have a line separating them. Tables offer a convenient solution, but for semantic reasons, you seek a CSS alternative.

The key to equal height columns lies in employing extensive bottom padding and negative bottom margin. Additionally, the columns must be enclosed within a div with overflow hidden.

For vertical text alignment, consider the following CSS snippet:

#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;
}

With this CSS, you can effortlessly align the heights of floating divs and create a visually appealing layout.

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