OK, I've played around with your CSS and HTML, so get your brain round this:
Code:
<html><head><title></title>
<style type="text/css">
body {
background-color: #fff;
color: black;
font-family: verdana, arial, helvetica, sans-serif;
margin: 0;
min-width: 450px;
padding: 0;
}
#top {
background-color: #aaa;
height: 90px;
}
#leftframe {
background-color: #666;
float: left;
height: 100%;
width: 145px;
}
#rightframe {
background: #333;
float: right;
height: 100%;
width: 145px;
}
#center {
margin: 0 155px;
text-align: center;
}
#content { height: 100%; }
</style></head>
<body>
<div id="content">
<div id="top"><img src="back0.gif" width="450px"></div>
<div id="leftframe"> </div>
<div id="rightframe"> </div>
<div id="center">
<p>;ljsfd;ljsd skdhfopefiwlh wuhkjsh sjdhflkshf
sfkjhskjhf djhfkjshf skdfhkjshdkjnvkjn jsdfhkjhsf
djkhfkjshdkjfhs jkdh</p>
</div>
</div>
</body></html>
I've tested this in a recent Mozilla nightly build, IE6 and Opera 7 beta.
Here's what you should pay attention to:
- the float: left and float: right properties. It takes a bit of thought, but once you figure out how these work, together with the the complementary clear: property, life is much simpler. Read this for a rather dry discussion of how they should work. This renders absolute postioning unnecessary.
- the "content" div is used to stop the center text squirting out the bottom when the page gets REALLY narrow.
- the 450px wide image in the "top" div, combined with the "content" div containing everything, forces IE to stop squashing the page once it hits that width. However, more standards-compliant browsers like mozilla and Opera will keep squashing the lower part in order to keep the floating right div in the viewport. (I think this is a bug in IE, and Opera & moz are doing the right thing)
- Luckily, however, Opera and Moz support the min-width CSS property, so sticking one of those on the body (here set to 450 px) keeps them in line when things get narrow.
The "top div is cut off" thing is a side effect of the main problem - and goes away when we fix it. However, we still have a similar problem with the height (why is there a vertical scrollbar?) - I think I vaguely understand, but not well enough to explain to other people 
Other stuff I did in passing:- on sizes of zero, the unit identifier is optional. 0px = 0em = 0pt = 0cm = 0in = nothing, nada, zilch. So I usually leave it out, because I'm lazy and can't be bothered typing it.
- when values of some of the margins/padding are the same, you can use shorthand. When you specify all four, you do them top/right/bottom/left - clockwise from the top. If you leave any out of this list, the missing value is assumed to be equal to its opposite - left = right, top = bottom. So margin: 0 10px 5px; will set the top to 0, right to 10px, and bottom to 5px. Left is missing, so it will take the same value as right. If you only give one value, it's applied to all four. Again, saves typing.
- On colours, you can use another form of shorthand - #000 is the same as #000000, #ddd = #dddddd, etc. It's just #rgb instead of #rrggbb.
problems replacing tables with CSS
.
2) it creates a white space at the bottom of the page which is gonna make me have to design "bottoms for the frames.
Bookmarks