two column and header css layout problem
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 poss开发者_如何学Cible 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.
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;
}
精彩评论