html - CSS div height 100% not working

Question

div2 is 1000px height because of div4, div5 and div6. I'm not understanding why div3 isn't getting the 100% height, it is 0px height.

<div id="div1" class="center" style="width:1024px; height:auto;">
    <div id="div2" style="float:left; width:100%; height:auto;">
        <div id="div3" style="float:left; width:460px; height:100%; background-image:url(img/bgVictorMonteiro.jpg); background-size:100% auto; background-position:bottom; background-repeat:no-repeat;"></div>
        <div id="div4" style="float:left; width:270px; height:1000px;"></div>
        <div id="div5" style="float:left; width:25px; height:1000px;"></div>
        <div id="div6" style="float:left; width:269px; height:1000px;"></div>
    </div>
</div>

Answer 1

The root of your problem, because it's a div within a div 100% takes value from its container, as in, if the parent div had a height of 50px, 100% on the child div would mean it would have the height of 50px but your parent div has the height of auto so it's taken whatever height that is :) hope this helps :p