Below is a quick html page that uses the css I was talking about. I should be a good starting point for you to base your layout on. I hope it helps.
When you add your other boxes into the columns you won't need the position: absolute; that you are currently using on each div.
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Example CSS Layout</title>
<style type="text/css">
html, body, div, span, applet, object, iframe,
pre, a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u,
i, center, dl, dt, dd, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0px;
padding: 0px;
}
body {
margin: 10px;
color: #000000;
background-color: #AFD2B8;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
.container {
margin: 0px auto;
width: 960px;
}
.header {
margin-bottom: 10px;
height: 145px;
background-color: #C2D8DD;
}
.leftcol {
margin-right: 10px;
float: left;
width: 175px;
background-color: #7B898C;
}
.middlecol {
float: left;
width: 490px;
background-color: #CBE9D3;
}
.rightcol {
margin-left: 10px;
float: left;
width: 275px;
background-color: #7B898C;
}
.footer {
margin-top: 10px;
height: 145px;
background-color: #C2D8DD;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
Header
</div>
<div class="leftcol">
Left Column
</div>
<div class="middlecol">
Middle Column
</div>
<div class="rightcol">
Right Column
</div>
<div class="clear"> </div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>