The challenge here is obviously not to create such a css-only 3col page. Not even to create a css-only cross browser 3col page. No, I want the following:
A page, cross browser friendly (aim for IE6, IE7, FF2, Opera9), with a hovering element, horizontally and vertically centered, with an equal space between the top and the element and the bottom and the element, same for the sides. Important: When the content inside the element exceeds the size of the element, the scrollbar should appear inside that element, or an element of equal size containing that element (in other words, the scrollbar may not stick out).
I'm afraid I'm going to have to illustrate this with my great psp skillz:
So: x has te be equal top and bottom, same for y left and right. Outer areas may be composed of multiple elements, but need to (at least be able to look) as one. They never move and are always completely in viewport. There will be no scrollbars on the body element. The header must always be at the top of the viewport, footer completely at the bottom.
Restrictions: Only x/html and css (any). No css eval (ie). Probably redundant but: no javascript. And no tables. Yeah, gotcha.
If I'm missing anything, probably something obvious, I'll add it.
Good luck :) I've spent a couple of hours on this problem with no luck. Even though I came very close in FF/Opera, it didn't even come close to it in IE6. The element keeps being hidden behind the footer or the header. Every 3col example I've found with google have a moving footer or somehow don't conform to the requirements above. Maybe I'm just missing something very obvious...
--
Here is the example in FireFox en Opera 9 (clean version). IE6 doesn't like it very much.