Trick Web Design (Full Screen & Non Full Screen Elements)

Question

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>