Fiddle: http://jsfiddle.net/dkx2q/2/
Something like this maybe:
CSS
body{
background-color:rgb(0,0,0);
}
#container{
display:block;
width:100%;
height:100%;
}
#fullScreenImage{
float:left;
width:25%;
height:100%;
background-color:rgb(124,197,118);
position:relative;
}
#content{
float:left;
width:75%;
height:100%;
}
#header{
display:block;
height:15%;
background-color:rgb(94,142,178);
position:relative;
}
#sidebar{
float:left;
height:85%;
width:20%;
background-color:rgb(162,94,179);
position:relative;
}
#contentArea{
float:left;
width:80%;
height:85%;
background-color:rgb(255,255,255);
position:relative;
}
span{
position:absolute;
top:50%;
width:100%;
text-transform:uppercase;
font-weight:bold;
font-family:Helvetica, 'Helvetica Neue', 'Arial Block', Arial;
font-size:9em;
text-align:center;
}
#header span{
font-size:7em;
top:40%;
}
HTML
<body>
<div id='container'>
<div id='fullScreenImage'><span>Full Screen Image</span>
</div>
<div id='content'>
<div id='header'><span>Header</span></div>
<div id='sidebar'>
<span>Sidebar</span>
</div>
<div id='contentArea'><span>Content Area</span></div>
</div>
</div>
</body>