layout with dynamic heights

Hi! (first post wiiii)

i'm pretty new at making layouts with CSS.

now i have particular problem with making certain divisions' height dependant on the user's viewport size.

what i would like to have is something like this (See Attached)

i have tried a bit with relative and absolute positions, but either it doesn't work or it is never how i want to be.

can someone perhaps give me some clues as to how i can make something like this?

thanks in advance!

Attached Images

opmaak.JPG (18.0 KB, 49 views)

have you googled it? I am not sure of many that have done this before... am sure it can be done....

maybe if you did a server side script that calculated browser width and/or height then provided a css for each size of the screen or you could do server side math to get this to work...

Code: Select all

<div style="width: 100%; height: 100px; background-color: #F00; margin: 0px;">Head</div>
<div style="width: 120px; position: absolute; top: 100px; bottom: 0px; background-color: #0F0;">Menu</div>
<div style="position: absolute; top; 100px; left: 120px; right: 0px; background-color: #00F;">Content</div>
<div style="height: 80px; position: absolute; bottom: 0px; left: 120px; right: 0px; float: left; background-color: #FF0;">Your footer</div>

This is the best I could do, the footer will float over top of everything when the window gets smaller then the content. You could fix that with z-index. which would cause it to go under things.
It doesn't go full height in IE, but that shouldn't matter unless your doing some crazy colouring like I have.

As far as I know this is the best that can be done without switching to evil tables.

This might do the trick. I believe that might help with your challenge.