how to expand child "div" height to parents height

Question

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

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

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

http://jsfiddle.net/r5h4w5s2/

.parent{
    width:200px;
    height:300px;
    border:1px solid black;
}

.child-left{
    float:left;
    border: 1px solid #FF0000;
    width:80px;
    height:100%;
}

.child-right{
    float:right;
    border: 1px solid #FF0000;
    width:80px;
    height:100%;
}

Here is a fiddle with an axample. By setting the height to 100% it will take the height of its first parent element.

Answer 2

Like this:

.parent{
  overflow: hidden;
}
.child-right{
  height: 100%;
}

Answer 3

That's a common problem, known as Equal Height Columns, described here (2010 article!). I would suggest the flex box solution or a Javscript approach.

Answer 4

Use Flexbox

If you don't need to use float element, you can use flexbox ! See code below :

.parent{
  width:200px;
  height:300px;
  border:1px solid black;
  display:flex;
  justify-content:space-between;
  align-items:stretch;
}

.child-left, .child-right{
  border: 1px solid #FF0000;
  width:80px;
}