How to Make a Floated Child Div Expand to the Height of its Parent?

Expanding Child Div Height to Parent's Height

In a web layout where parent and child elements are positioned side by side, it is often necessary to ensure that their heights are equal. This is to prevent the parent element from appearing stretched or compressed due to content within the child element.

Problem:

You have a parent div with two floated child divs (child-left and child-right). When the content of child-left increases, the parent div's height adjusts accordingly. However, the height of child-right remains unchanged.

Solution:

To make child-right's height equal to its parent, apply the following CSS styles:

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

.child-left {
    float: left;
}

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

• .parent:

  • overflow: hidden: Prevents the parent div's content from overflowing beyond its bounds.
  • position: relative: Sets the parent div as a relative positioning context for its child divs.

• .child-left:

  • float: left: Positions child-left to the left within the parent.

• .child-right:

  • background: green: Optional color for demonstration purposes.
  • height: 100%: Sets the child-right's height to match its parent.
  • width: 50%: Specifies the width of child-right as 50% of the parent.
  • position: absolute: Positions child-right absolutely within the parent.
  • right: 0: Aligns child-right to the right of the parent.
  • top: 0: Aligns child-right to the top of the parent.

By combining these styles, you can achieve the desired height expansion of child-right to match its parent, regardless of child-left's content.

The above is the detailed content of How to Make a Floated Child Div Expand to the Height of its Parent?. For more information, please follow other related articles on the PHP Chinese website!