Есть следующий код:
Код:
<body>
<div id="main">
<div id="topmenu">
<p><font size="3">ГЛАВНАЯ | БИБЛИОТЕКА | МАГАЗИН</font><br>
<font size="2">новости / о сайте / ссылки / гостевая книга</font></p>
</div>
<div id="header">
<p>Здесь будет меню</p>
</div>
<div id="content">
<p>По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы.</p>
</div>
<div id="footer">
<p><a href="http://yandex.ru/vesna.html">http://yandex.ru/vesna.html</a>.</p>
</div>
<div id="leftside"></div>
<div id="rightside"></div>
</div>
</body>
</html>
есть css-файл, где описаны блоки:
Код:
body {
margin: 0px;
padding: 0px;
background-image: url('img/back.gif');
}
#leftside {
position: absolute;
top: 0px;
left: -50px;
width: 50px;
height: 100%;
background-image: url('img/back2.gif');
}
#rightside {
position: absolute;
top: 0px;
left: 100%;
width: 50px;
height: 100%;
background-image: url('img/back3.gif');
}
#main {
position: relative;
width: 60%;
left: 20%;
margin: 0px;
padding: 0px;
}
#topmenu {
width: 96%;
margin: 1%;
padding: 1%;
background-color: #DDDDDD;
}
#header {
width: 98%;
margin: 0px;
padding: 1%;
background-color: orange;
}
#content {
width: 98%;
margin: 0px;
padding: 1%;
background-color: #f0f0f0;
}
#footer {
width: 98%;
margin: 0px;
padding: 1%;
background-color: orange;
}
#content p, #leftmenu p, #rightmenu p {
margin-top: 0px;
}
#header p, #footer p {
margin-top: 0px;
margin-bottom: 0px;
}
так вот, в чем проблема:
блоки
leftside и
rightside не хотят делаться высотой в 100%.
я только начал разбираться с css-версткой, поэтому помогите...
результат можно посмотреть здесь:
http://rubooks.jino-net.ru/test/