Hello all,

I've just started designing a site for a friend's company, and it's been a while since I did any real design work - last time really was when frames weren't seen as A Bad Thing I've got a rough design drafted in Illustrator, which they like, and I could implement it easily with frames but I'd like to avoid that (I aim to use CSS and PHP/SSI's for the layout of the site meaning each HTML file is as near as possible just content and a couple of includes for headers/footers).

My CSS knowledge is pretty poor, I've seen close to the effect I'm after but after a couple of days playing around my brain is a bit fried and so I was hoping someone might be able to help.

Firstly, the layout I hope to achieve is linked to below. As you can see, I've annotated it with what I see as the "frames" (and the fact that I just want the contentArea bit to scroll). I quite like the drop shadow and the white "main" bit on the blue background, so I'd like to keep those. (Note that where it says "This should scroll", I was referring to the whole "contentArea" frame, not that little list thing)



I've pretty much done it in Firefox (roughly!) as seen in the next screenshot, except that it doesn't resize properly below about 640px wide (not a huge deal really). However, the same thing in IE6 (as in the other s/shot) loses its ability to scroll. I've read lots about the various limitations and workarounds for IE CSS problems, but I'm not quite sure which applies to me.





The CSS used is below (and the HTML is just simple <div id="contentArea"> ... (logoArea/bodyArea/footerArea div's here) ... </div>), it's really just hacked together from a few tutorials.

Code:
/* Reset */

* {
	margin:0;
	padding:0;
}

/* Define layout of elements */

body {
}

#contentArea {
	position:absolute;
	top:0;
	left:10%;
	right:10%;
	width:80%;
	height:100%;
	z-index:50;
}

body>#contentArea {
	position:fixed;
}	

#logoArea {
	position:absolute;
	top:0;
	left:10%;
	width:80%;
	height:100px;
	z-index:0;
}

body>#logoArea {
	position:fixed;
}

#bodyArea {
	width:80%;
	top:120px;
	left:10%;
	position:absolute;
	bottom:120px;
	margin:0 auto;
	overflow:auto;
}

#footerArea {
	position:absolute;
	bottom:0;
	left:10%;
	width:80%;
	height:100px;
	z-index:0;
}

body>#footerArea {
	position:fixed;
}
	
/* Define styling of elements */

body {
	background:#ff0;
}

#contentArea {
	background:#f00;
}

#logoArea {
	background:#0f0;
}

#bodyArea {
	background:#00f;
}

#footerArea {
	background:#f0f;
}
If anyone could give me their input, especially on how to fix the site in IE6 (I guess I *could* just have the header/footer scroll with the page but I refuse to be beaten by M$ ), it'd be great.

Cheers,
Tom