Parent div with height: 100% doesn't work

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).

#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;
}

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

This is what I get:

Why height: 100% doesn't work?

Answer 1

This can work

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