How to Make Two Equal-Height Floating Divs with a Separating Line in CSS?

Making Equal Height Floating Divs with CSS

Problem: Creating two floating divs that share the same height and have a separating line between them, without using tables for semantic reasons.

Solution: To achieve this, you can employ the following CSS technique:

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

Explanation:

• Wrapping the divs in a container with overflow: hidden forces the line break caused by the floating divs to be within the container.
• Applying a large bottom padding and a negative margin of equal amount to the divs ensures they expand to occupy 100% of the height while still having their content vertically centered.
• The line separating the divs is created using a small margin or border applied to one of them.

By utilizing this CSS technique, you can create two equal-height floating divs without the semantic implications of using a table.

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