CSS - Expand float child DIV height to parent's height

Question

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 its parent?

Answer 1

For the parent element, you can add the following properties:

.parent {

    overflow: hidden;

    position: relative;

    width: 100%;

}

Then, for .child-right use the code given below:

.child-right {

    background:green;

    height: 100%;

    width: 50%;

    position: absolute;

    right: 0;

    top: 0;

}