height 100% doesn't work, two divs inside div

Question

See css: http://jsfiddle.net/4JgA4/114/

Also here:

<div style="min-height:40px; border:solid 1px black; float:left;">
      <div style="border:solid 1px black; height:150px; float:left;">
       First to set height
      </div>

       <div style="border:solid 1px red; height:100%; float:left;">
      Why don't get the 100%
    </div>
</div>

Why does the second div doesn't get the 100%?

Answer 1

<div style="min-height:40px; height:150px; border:solid 1px black; float:left;">
    <div style="border:solid 1px black; height:100%; float:left;">
    Your text 1
    </div>

    <div style="border:solid 1px red; height:100%; float:left;">
    Your text 2
    </div>
</div>

• The reason is you didn't put exact height (150px) for the first .
• One more thing, you have already put exact height for th first height, you only need to height = 100% for inside tags.

Here is the result: http://jsfiddle.net/4JgA4/117/

Answer 2

It doesn't get the full height because the original container has no height. So 100% of nothing is still nothing.

If you give the parent div a height, then the 100% will take effect.

As seen here: http://jsfiddle.net/4JgA4/115/

<div style="min-height:40px; border:solid 1px black; float:left; height:150px;">
    <div style="border:solid 1px black; height:150px;  float:left;">
    First to set height
    </div>

    <div style="border:solid 1px red; height:100%; float:left;">
    Why don't get the 100%
    </div>
</div>