Full height and full width CSS layout

Question

I am looking for a way to create a CSS-only (no JavaScript) layout with 5 regions that looks like this:

   ┌────────────────────┐
   │          H         │
   ├─         


        

Answer 1

Hi fmunkert (and others here:),

I was just curious and thought want to try it out, so I fired up my notepad and come up with something like this:

    



H


A
B
C


F

and here's the output in Firefox:

and the output in IE8:

I tested this using Firefox 3 and IE8. Seems ok to me. Is this what you wanted? :)

Note 1: As mentioned by others, this may not be practical, but still it depends on what you / your clients want.

Note 2: If this is really what you wanted, you can edit the height and width values according to your need, and you should put those CSS rules into a separate CSS file instead of inline styles as a best practice.