Форумы портала PHP.SU :: Как сделать боковые панели по краям?

доброго дня!
первый раз занимаюсь версткой макета? пытаюсь сделать боковую панель..
ниже наброски того, что получилось на настоящий момент
что нужно там поправить/добавить, чтобы по краям от контента были бекграунды растянутые по высоте до самого футера?
туда еще в будущем будут всякие модули от джумлы ставится, а пока просто фоновые блоки с бекграундом

CODE (html):
скопировать код в буфер обмена

<html>
<head>
 <style type="text/css">
body {
margin: 0;
padding: 0;
}
.pagewidth {
background:transparent;
width:700px;
margin: 0 auto;
}
#middle {
    width: 100%;
    height: 1%;
    position: relative;
}
#middle:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
#container {
    width: 100%;
    float: left;
    overflow: hidden;
}
#header {
float: left;
height: 35px;
width: 500px;
background:pink ;
}
#topmenu {
 float: left;
    height: 20px;
    width: 500px;
background:yellow;
}
#main {
background:gray;
width:456px;
height:100px;
margin-top: 0;
padding: 0 22px 22px;
}
#left {
background:brown;
    float: left;
    width: 150px;
    margin-left: -850px;
    position: relative;
    height:auto;
}
#right {
background:brown;
float: left;
    width: 250px;
    margin-left: 500px;
    margin-top:-120px;
    height:auto;
}
#footer {
background:green;
  float: left;
    height: 50px;
    margin-left: -90px;
    margin-top: -2%;
    position: relative;
    width: 700px;
    z-index: -1;
}
  </style>
</head>
<body>
<div class="pagewidth">
    <div id="header">шапка</div>
    <div id="topmenu">меню</div>
    <div id="middle">
        <div id="container">
            <div id="main">контент</div>
        </div>
        <div id="left">блок слева от шапки до футера</div>
        <div id="right">блок справа от шапки до футера</div>
    </div>
    <div id="footer">футер</div>
</div>
</body>
</html>