How to to create an interface that wraps the browsers view area?

Problem

I'm designing an interface for a service of mine and it needs to wrap the whole view area. It's more of an application then a normal web-page. I want to know best practices for modern technology like css 3.0. I don't want to have to write this in flash.

example

Sorry that the photo is from mspaint, but it was quick and dirty.

The goal is to have the topbar rest in normal position with the left bar the same way. the middle section (the app area) needs to fill the rest with an overlay element that may surpass the application area.

I know I can do javascript calculations, but I was hoping for a better way.

Problem courtesy of: JustinKaz

Solution

That layour is a fluid/liquid width mixed with fixed width requirement. You can do that easily with normal CSS. You can do the box in low right hand corner by specifying fixed position in CSS. Check this for a liquid example example. More here

Edit enter image description here Set the container element's height to 100%. This is still rough but will get you started

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/test-style.css">
</head>

<body>

<div id="dv-Container">

    <div id="dv-header">
        <h2>Header</h2>
    </div>

    <div id="dv-sideBar">
        <h2>Side bar</h2>
    </div>

    <div id="dv-Content">
        <h2>Content</h2>
    </div>

    <div id="dv-Controls">
    </div>
</div>

</body>
</html>

CSS file

/* CSS Document */

html{
height:100%;
}

body{
margin:0;
padding:0;
min-height:100%;
height:100%;
}

h2,a{
    margin:0;
    padding:0;
}

#dv-Container{
background-color:#CCFFFF;
width:100%;
height:100%;
margin:0pt;
}

#dv-sideBar{
    float:left;
    width:200px;
    height:100%;
    background-color:#CCCCCC;
}

#dv-Content{
    float:inherit;
    background-color:#FFFFFF;
    width:100%;
    height:100%;
}

#dv-Controls{
    height:150px;
    width:100px;
    background-color:#00CC99;
    position:fixed;
    right:10px;
    bottom:100px;
    margin:0;
    float:right;
}
Solution courtesy of: Zo Has

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.