Height: 100%

[Satal Keto]

What I am doing is to try and get side bars and a main area (so the page is divided into three columns)
I am using CSS to deal with the presentation of the three area's
The CSS I am using is
.leftside {background-color:#222d42; border:1px solid #566B9E; width:15.5%; height:100%; text-align:center; float:left; margin-left:0%;}
.rightside {background-color:#222d42; border:1px solid #566B9E; width:15.5%; height:100%; text-align:center; float:right; margin-left:0%;}
.main {background-color:#161616; border:1px solid #566B9E; width:68.53%; height:100%; text-align:center; float:left; margin-left:0%;}
But the problem is that the three area's are only having that applied to the area where there is content (as shown in this screen pic)
http://img367.imageshack.us/img367/1174/untitledmq2.th.jpg (http://img367.imageshack.us/my.php?image=untitledmq2.jpg)

What I want is to get the three area's to have their presentation to the footer.

Does anyone have any idea's how I can do this as I would have thought that height: 100%; would have done that but I guess it only does to the bottom of the content rather than the bottom of the page

Thanks for any help in advance
Satal keto

[koyama]

To get what you want, this would usually involve using something like

html, body {
height: 100%;
margin: 0;
padding: 0;
}
Maybe you may get some inspiration looking how others have made similar templates:
http://bonrouge.com/3c-hf-fluid-lc.php

Tip: To clearly see the dimensions of your building blocks, give them some background color while you are developing.