доброго дня!
первый раз занимаюсь версткой макета и вот уже 3 день пытаюсь сделать боковую панель..
ниже наброски того, что получилось на настойщий момент
что нужно там поправить/добавить, чтобы по краям от контента были бекграунды растянутые по высоте до самого футера, туда еще в будущем будут всякие модули от джумлы ставится, а пока просто фоновые блоки с бекграундом.
<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>