<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<style type="text/css">
/* required to kill off any extra "helpful" browser padding */
html, body {
margin: 0;
padding: 0;
}
#header {
top: 0px;
margin-left: auto;
margin-right: auto;
/* required to prevent scroll bar at the bottom */
width: 99%;
height: 60px;
z-index: 0;
position: relative;
border: 1px solid red;
text-align: center;
}
#c1
{
}
#c2
{
clear: both; /* no floating elements on right or left */
float: left;
width: 99%; /* width of whole page */
position:relative;
overflow:hidden;
border: 1px solid green;
display: table-cell;
vertical-align: middle;
}
#c3
{
}
#contentsContainer {
height: 200px;
width: 99%;
text-align: center;
position: relative;
}
#contents{
border: 1px solid blue;
/* height must be a fixed number */
height:40px;
position:relative;
}
#rightBlock {
top: 0px;
/* leave 1 percent to prevent scrollbar */
left: 80%;
width: 19%;
height: 99%;
z-index: 99;
position: absolute;
margin: 0;
padding: 0;
border: 1px solid red;
}
#leftBlock {
top: 0px;
left: 0%;
width: 20%;
height: 99%;
z-index: 99;
position: absolute;
margin: 0;
padding: 0;
border: 1px solid red;
}
#footer {
text-align: center;
bottom: 0px;
margin-left: auto;
margin-right: auto;
width: 30%;
z-index: 0;
position: relative;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="header">
header
</div>
<div id="c1">
<div id="rightBlock">
right right right right right right right right right
</div>
<div id="leftBlock">
left left left left left left left left left left left left
</div>
</div>
<!--div id="contentsContainer">
<div id="contents">
contents
</div>
</div>
<div id="c1">
<div id="c2">
middle
</div>
</div-->
<div id="footer">
footer
</div>
</body>
</html>