Problems with percentages in IE css

Question

I'm creating some div elements. Then I'm trying to give the divs width and height using percentages. Nothing happens. What is the problem?

Demo

HTML:

<!--Wrapper div-->
    <div id="wrapper">
       <div id="inbox">

        </div> 

    </div>

CSS:

html, body {
    width:100%;
    background-color:yellowgreen;
}

#wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    background-color: #ffffcc;
    min-width: 700px;
    -webkit-box-shadow: 5px 5px 5px #828282;
    -moz-box-shadow: 5px 5px 5px #828282;
    box-shadow: 5px 5px 5px #828282;
}

#inbox {
    width:60%;
    height:70%;

}

Answer 1

Add height:100% to html, body and #wrapper in css

Here's an updated fiddle : fiddle

Answer 2

It is working except your div has no height. Either set a min-height or add some content.

Answer 3

You need to specify some form of height for each parent element of #inbox, including html.

html, body {
    height:100%;
}

#wrapper {
    min-height:70%;  
}

#inbox {
    height:70%; 
}