Cross browser CSS layout with fixed regions

[Gordon McVey]

I've been working at this web company for a while now (mainly on PHP stuff)
who are developing a website. The big problem with this site is that it's
all in Flash and uses some really dumb design. So I'm trying to lobby for
the scrapping of the Flash design in favour of a cleaner layout that is
based on HTML and entirely standards compliant. The problem is that in
order to stand even a remote chance of convincing them (I've already used
the bandwidth argument, the need to have the player argument, the
inaccessible for visually impaired people argument and the Google wont be
able to index argument but so far no luck), it has to look like the Flash
site

I want to go one better and have something that resembles the Flash site, is
standards compliant and that automatically sizes to fit the browser window,
leaving no ugly white margins down the sides. I thought of doing this with
tables but I understand that tables are now considered to be a Bad thing,
and besides I'm not sure if what I want to do can be accomplished with them
anyway.

The design I want goes as follows: A header section with the page title and
nav tabs for the major sections of the site which runs along the top of the
page and is always anchored there (my experiments suggested a div with
position:fixed but this wouldn't work in IE). Next comes a box down the left
hand side with navigation relevant to the section of the site the viewer is
on. To the right of this is a box that contains the page contents with a
scrollbar as needed (div with overflow:scroll set maybe?) and finally, along
the bottom should be a strip with the copyright and maybe some other stuff
like a quick log-in form. This should be anchored to the bottom of the
window.

Here is a quick ASCII diagram of the kid of thing I want:

------------------------------------
Page title and main navigation
------------------------------------
Subsection | Page content A
navigation | "
| "
| "
| "
| "
| V
------------------------------------
Page copyright
------------------------------------

So, with CSS layout, I am thinking that I need a div along the top of the
screen (top: 0px; left: 0px; width: 100%; height: auto) and another one on
the bottom (left: 0px; bottom: 100%; width: 100%; height: auto;) with a
third div between that expands to a height equivalent to 100% minus header
height - footer height.

I've been playing around with CSS but am quite frankly at a loss, I can get
things that sort of resemble what I want but that don't work the way I
envisioned. If any of you have some insights I would appreciate hearing
them. Is what I want even possible without resorting to JavaScript trickery?

[Gordon McVey]

"Gordon McVey" <pr*******@whitehouse.gov> wrote in message
news:0Z***************@newsfe4-win.ntli.net...

Here is a quick ASCII diagram of the kid of thing I want:

------------------------------------
Page title and main navigation
------------------------------------
Subsection | Page content A
navigation | "
| "
| "
| "
| "
| V
------------------------------------
Page copyright
------------------------------------

After playing around for an evening with Dreamweaver, this is what I came up
with to demonstrate the layout I want. The colours and content are purely
for demonstration purposes, of course.

http://www.foxholeproductions.com/temp/layouttest.htm

It validates as XHTML 1.0 strict with no errors and displays near-perfectly
in FireFox, but Internet Exploder makes something of a Horliks of it. The
only Firefox problem I had was that I got scrollbars along the right and
bottom edges of my content div, when I only want one along the right edge.
Still, not bad for a first attempt, even if I do say so myself

So, how do I get it to do that in Internet Exploder too?