<p>I have a container div that holds two internal divs; both should take 100% width and 100% height within the container.</p>

<p>I set both internal divs to 100% height. That works fine in Firefox, however in IE the divs do not stretch to 100% height but only the height of the text inside them.</p>

<p>The following is a simplified version of my style sheet.</p>

<pre><code>#container
{
   height: auto;
   width: 100%;
}

#container #mainContentsWrapper
{
   float: left;

   height: 100%;
   width: 70%;
   margin: 0;
   padding: 0;
}


#container #sidebarWrapper
{      
   float: right;

   height: 100%;
   width: 29.7%;
   margin: 0;
   padding: 0;
}
</code></pre>

<p>Is there something I am doing wrong? Or any Firefox/IE quirks I am missing out?</p>

You might have to put one or both of:
```
```
html { height:100%; }
```
```
or
```
```
body { height:100%; }
```
```
EDIT: Whoops, didn't notice they were floated. You just need to float the container.