This more like what I would recommend:
CSS
body {
padding: 0;
margin: 0;
}
#container {
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -250px;
position: absolute;
height: 500px;
width: 800px;
}
#container #left {
float: left;
height: 100%;
background-color: red;
width: 20%;
}
#container #right {
float: right;
height: 100%;
background-color: lime;
width: 20%;
}
#wrapper {
height: 100%;
margin-left: 20%;
margin-right: 20%;
background-color: peru;
}
html
<!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">
<head>
<title>Menu</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="center.css" />
</head>
<body>
<div id='container'>
<div id ='left'></div> <!-- left -->
<div id ='right'></div> <!-- right -->
<div id='wrapper'></div> <!-- wrapper -->
</div> <!-- container -->
</body>
</html>
Where the bold in the above markup refers the above stylesheet and wrapper refers to the middle content area.