two column and header css layout problem

Question

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.

If this is your first website, I don't recommend doing things this way. You should assume that you'll get visitors on very different screen sizes where this fixed 100% height layout is going to be a problem. I'm telling you this from 12+ years experience building HTML sites. If you have a really good reason, go ahead though, just a friendly warning. — Jarrett Widman
– Jarrett Widman, Commented Sep 6, 2010 at 23:17

Damien · Accepted Answer · 2010-09-06 23:12:35Z

3

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

edited Sep 6, 2010 at 23:12

answered Sep 6, 2010 at 21:35

Damien

2,2541 gold badge22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

two column and header css layout problem

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related