Parent div with height: 100% doesn't work [dup

Question

Possible Duplicate:
CSS - 100% height doesn’t work

I have 3 divs, the div-1 is a background and div-2 and div-3 are two containers (one for text and one for photo).

HTML:

<div id="div-1">
    <div id="div-2"></div>
    <div id="div-3"></div>
</div>

CSS:

#div-1 {
width: 100%;
height:100%;
padding: 40px 0;
margin:0;
}

#div-2 {
width: 500px;
margin: 0;
float: left;
}

#div-3 {
width: 200px;
margin: 0;
float: right;
}

This is what I get:

Why height: 100% doesn't work?

Answer 1

The height of #div-1 is 100% but 100% of nothing, as it relies on the parent tags height I believe. Try setting your body to 100% height in css.

Answer 2

This can work

<div id="div-1">
    <div id="div-2"></div>
    <div id="div-3"></div>
    <div style="clear:both"></div>
</div>

Answer 3

you need to add clear flow after you applying floating properties to elements, more about it here: http://www.quirksmode.org/css/clearing.html

Answer 4

Remove height: 100%; in #div-1 and add position: absolute;. It will work just fine.