I'll try and describe what I am doing.
Here are the requirements:
1) Fixed height header (80px)
2) Variable height content area - must assume the *remaining* width of it's parent at a minimum (default is to assume it's parent height which won't work)
Once I have the fixed header & variable content area and optionally fixed or variable height footer I have a standard layout which would make itself handy for most layouts I design. The width is usually fixed at 640 pixels.
Man it would be handy if there was a CSS repository which had nothing but the wire frame output of CSS layouts, so I could click an icon for a three row design and download that CSS template and fill in the area
Anyways, the content (or middle row if you can imagine) has to fill up the *remaining* space whilst accounting for the header (80px or whatever) as well as the footer (80px or whatever). If the page is blank (which is sometimes what happens) the footer would need to be aligned with the bottom of the visible screen area.
ONLY if there is more content than can be visisbly seen on screen should scrollbars appear and suggest otherwise.
When you simply set the height to 100% on the middle DIV it takes on the *entire* height of it's parent element. Because the parent is set to 100% it assumes all visible space (AWESOME!) but when you add DIV's it uses those in it's calculation, so...
header = 80px
content = 100% = 480px - assume small resolution
footer = 80px
480 + 80 + 80 = 640px
And because the parent element assumes entire view space at 480 pixels, and 640 is greater than 480, scrollbars appear and the footer gets pushed out of view area, requiring scrolling...
Even though the content area is empty, because it's height is 100% which again, it assumes it's parent so 480px, do the math above and you will see why the scrollbars appear.
*** This is an undesired effect and thows off my designs ***
I can live without footers...but a header is absolutely nessecary and sometimes they aren't based on percentages, but instead pixels (80)...
So I have a header which is 80 pixels and a content area which is height: 100% (480 pixels) I have been struggling to find a method of showing a fixed height header and a variable content area.
The last example given to me does this nicely but only in FireFox!!!
If you know a way to have a fixed header/footer and variable content area which is cross browser, please, I'm very interested in knowing how it's done...I'm dying here
Hopefully this clears it up for you - certainly it's help me better understand what it is I am trying to solve...

which hopefully helps
Cheers
