How to Make Floated Child Div Heights Match Their Parent's Height?

Balancing Floated Child Div Heights to Match Parent Height

Problem Statement:

In a page with the following HTML structure:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

As the content of the child-left div expands, the parent div's height rightfully increases. However, the height of the child-right div remains unchanged, which poses the question: how to equalize the height of child-right to that of its parent?

Solution:

To make the child-right div's height match its parent's height, apply the following CSS properties to the parent element:

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

These properties ensure that the parent element has a defined height and contains the floated children. Next, add the following CSS properties to the .child-right class:

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

These properties give the child-right div an absolute position, setting its height to 100% and placing it against the right edge of the parent.

For more detailed examples and information on creating equal height columns, refer to the provided links in the reference section below.

References:

• [CSS Examples for Equal Height Columns](link to external resource)
• [Information on Equal Height Columns](link to external resource)

The above is the detailed content of How to Make Floated Child Div Heights Match Their Parent's Height?. For more information, please follow other related articles on the PHP Chinese website!