two column and header css layout problem

Question

Hi,

I'm trying to make my first website and i'm having some trouble with css. i want a two column + header layout that fully occupies the whole website screen space

i want the following specification:

• header 20 % of height screen
• left column 20% width screen & 80 height screen(the remaining free space)
• right column 80 width screen & 80 height screen(the remaining free space)

I also would like to have the div's not overlap each other. I don't know if this is possible if you use % to specify the width and height, but i hope so :). I hope someone will help me. i will appreciate it very much.

Thanks in advance.

Answer 1

I don't think a dynamic height is very usual for a header, but if this is really what you want, then this should work:

<div id="header">
</div>
<div id="content">
   <div id="left">
   </div>
   <div id="right">
   </div>
</div>

and CSS

html, body {
   height:100%; /* important for some browsers */
} 
#header {
   height:20%;
   width:100%;
} 
#content {
   height:80%;
   width:100%;
   float:left;
}
#left {
   width:20%;
   float:left;
}
#right {
   width:80%;
   float:left;
}