100% height for both floated div and non-floated div next to it

Question

I would like to create 3 colored divs.

left: fixed width and 100% height

right: fills the remaining space (100% height and width (minus left div))

last div: inside the right div

This is what I have so far:

here is the CSS:

.left {
width:200px;
height:100%;
top:0;
position: absolute;
background: black;
float:left;
}

.right{
margin-left:210px;
background: green;
position: relative;
height: 100%;
}

.box {
width: 50%;
height: 200px;
position: relative;
margin-right: auto;
margin-left: auto;
background: black;
}

and here is the HTML:

<div class="left"></div>
<div class="right">
  <div class="box"></div>
</div>

http://jsfiddle.net/fxWg7/1632/

This makes the div.right be the size of the box inside it, even though I tried to make it 100% of the window. How do I fix this?

Another question I have is: why can I not make the div.box have 100% height? If I try that, both div.right and div.box disappear.

Answer 1

If you want 100% of the height of the window, add:

html, body
{
    height:100%
}

to you CSS. But if anything goes beyond the height of the window, it's a completely different problem.

Answer 2

You are mixing the concept of window with the concept of page.

height: 100%;
width: 100%;

are specifying that the height and the width of all the affected elements should fill their parent, not the whole window. You do not have content which would require size in your page, so your page's size is extremely small. This is why your div s disappear.

You need to set the size of the body with javascript.