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

Question

I have the page structure as:

 

 

   

 

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?

Answer 1

To make a child div's height match that of its parent, set the child div's height equal a percentage value, in your case 100%. The percentage value is a reference to the parent.

EXAMPLE:

If you had set the parent div's height to 100px, and the child div's height to 90%, the child div's height would amount to 90px, or 90% of its parent 100px.

ANALOGY:

Dealing with font sizes, where the unit em is a child's reference to its parent.

If a parent div has a font-size: 10px, and a child div has a font-size of 1em, then child's font-size is 100% of the parent div's font-size.

If child div's font-size: 2em, then it would equal 20px, because the parent div's font-size is 10px and 2 times 10px equals 20px.