CSS height:100% for both inner and outer divs - html

Question

I have a layout that works fine in Firefox and Chrome but not in IE or Opera, so I'm looking for a better solution or a way to modify my present solution without using any JavaScript. The problem is that I can't get the innermost divs to get maximal height within the divs containing them, i.e. #l within #left and #r within #right.
<div id="wrap">
<div id="header">
</div>
<div id="content">
<div id="left">
<div id="l">
L
</div>
</div>
<div id="right">
<div id="r">
R
</div>
</div>
</div>
</div>
Here's the CSS I've come up with so far:
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body, div {
margin: 0;
padding: 0;
}
body {
overflow-y: scroll;
}
html, body {
height: 100%;
}
#wrap {
background-color: #dddddd;
width: 100%;
height: 100%;
display: table;
border-spacing: 1em;
}
#header {
height: 2em;
display: table-row;
}
#content {
background-color: #f49837;
width: 90%;
display: table-row;
padding: 1em;
}
#left {
width: 30%;
background-color: #490274;
display: table-cell;
padding: 1em;
}
#right {
width: 70%;
background-color: #490274;
display: table-cell;
padding: 1em;
}
#l, #r {
width: 100%;
height: 100%;
background-color: #e1098f;
border-spacing: 0.5em;
display: table;
}
And here's a jsfiddle that shows what it should look like (if you look at it in Firefox or Chrome). The pink fields should cover the entire height of the purple ones except for padding.
http://jsfiddle.net/SsyAr/1/
Edit: Even if I should solve the IE/Opera problem I realize that I need something else as well, since there is no colspan feature available for CSS tables, and I'd need that for the header if I want it to have a width of 100%. The standard solution seems to be using display: table-caption + display: table-row-group. But however I try I can't make the caption part of the total height of 100% of the viewport. The table-row-group will be 100% high and the caption is added upon that.