开发者

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;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜