IMHO.WS - Помогите разобраться со слоями в CSS

Есть следующий код:

Код:

<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/