How Can I Make Two Floated Child DIVs Have Equal Heights?

Equalizing Heights of Floated Child DIVs

Problem:

In a page layout with a parent DIV containing two floated child DIVs, only the first child DIV expands its height to match the parent's height when content increases within it. The second child DIV remains at its default height, leaving an uneven appearance.

Solution:

To ensure the second child DIV (.child-right) expands to the same height as its parent, apply the following CSS to the parent .parent and child .child-right elements:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Explanation:

• Setting overflow: hidden on the parent element prevents the content of the child DIVs from overflowing the parent's bounds.
• Positioning the parent element relatively allows the child DIV to use absolute positioning within its frame.
• Setting width: 100% on the parent element ensures it takes up the entire width of its container.
• For the child DIV, setting height: 100% makes it expand to the height of its parent.
• width: 50% ensures it occupies half of the parent's width.
• Absolute positioning using right: 0 and top: 0 places the child DIV at the top-right corner of the parent, aligned with the right edge.

By using this combination of CSS properties, the floated child DIVs will expand to match the height of their parent DIV, resulting in an equal height distribution among both children.

The above is the detailed content of How Can I Make Two Floated Child DIVs Have Equal Heights?. For more information, please follow other related articles on the PHP Chinese website!