Home > Web Front-end > CSS Tutorial > How to Create Equal-Height Floating Divs with Pure CSS?

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

Barbara Streisand
Release: 2024-12-11 07:23:09
Original
319 people have browsed it

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;
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template