Search code examples
htmlcsslayout

How can I expand floated child div's height to parent's height?

I have the page structure as:

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

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

Now, the child-left DIV will have more content, so the parent DIV's height increases as per the child DIV.

But the problem is child-right height is not increasing. How can I make its height as equal to it's parent?

Solution

  • For the parent element, add the following properties:

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

    then for .child-right these: 

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

    Find more detailed results with CSS examples here and more information about equal height columns here.