Cross-browser flex panels

http://stackoverflow.com/q/9673972/267995

by Victor

HTML

<div id='header'></div>
<div id='col0'></div>
<div id='col1'></div>
<div id='col2'></div>
<div id='footer'></div>

CSS

div{
    position:absolute;
}

#header{
    top:0px;
    left:0px;
    right:0px;
    height:3em;
}

#footer{
    bottom:0px;
    left:0px;
    right:0px;
    height:2em;
}

#col0,
#col1,
#col2{
    top:3em; /* header height */
    bottom:2em; /* footer height */
    width:33.33%;
}

#col0{ left:0%;   width:30%; } /* left =  0       */
#col1{ left:30%;  width:40%; } /* left =  0 + 30  */
#col2{ left:70%;  width:30%; } /* left = 30 + 40  */




/* Colors */
#header{ background:#bbb; }
#col0{ background:#ccc; }
#col1{ background:#ddd; }
#col2{ background:#eee; }
#footer{ background:#aaa; }