Как сделать боковые панели по краям? что изменить
доброго дня!
первый раз занимаюсь версткой макета и вот уже 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>
|
Вы в курсе, что у Вас футер не прижимается к низу окна браузера, если контента мало? Но такое в принципе имеет право на жизнь - Яндекс вон не жужжит.
Ещё учтите - блок по умолчанию по ширине расстягивается на 100%, а по высоте схлопывается до высоты внутреннего контента. Хотите сайдбары одной высоты с центральным блоком? - оборачивайте их другим блоком (тем же id="container"). И выкиньте всякий мусор из CSS - Вам там 100 лет не нужны ни float:left, ни position:relative, ни height:auto А лучше всего возьмите готовый шаблон подходящей структуры (их навалом в сети - есть даже генераторы) - и посмотрите насколько там небольшой, но эффективный код. |
а футер и не должен прижиматься к низу, он должен быть под контентом, т.е. плавающим.
а вообще уже разобрался, поделились ссылкой с помощью которой смог самостоятельно понять.. правда теперь другие проблемки возникли, но это уже другая тема будет наверное ) http://htmlbook.ru/layout/fiksirovan...na-tri-kolonki |
| Часовой пояс GMT +3, время: 10:27. |