when testing your code, the page didn't display for me at all :)
absolute positioning is not recommended as it can be displayed very differently in the different browsers and with different resolutions or window sizes.
i understand if you're "afraid" of floats at the beginning, i was too, but then i found a very easy explanation to it and suddenly understood.
The only thing you have to keep in mind with floats is to float:left any block that has to be placed side by side and only float:right the very last one. Also, make sure that you wrap it up with a wrapper div that has the same width (or more) than the sum of the floated divs. warapping is very useful as that way you can move your floated divs along the page as you like (ie centering them).
Let me give you a nice example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
<!--
body { margin: 0; padding: 0 }
#mainWrapper{ width: 1000px; margin: 0 auto; }
#divLeft { float:left; background-color: red; width: 200px; }
#divCenter { float: left; background-color: blue; width: 600px; }
#divRight { float: right; background-color: green; width: 200px; }
-->
</style>
</head>
<body>
<div id="mainWrapper">
<div id="divLeft">Left box</div>
<div id="divCenter">Some text</div>
<div id="divRight">Right box</div>
</div>
</body>
</html>
one more thing: if you want to place another block below the 3 columns, the only thing you have to do is use clear:both in the div below or simply add the following code:
<div style="clear:both"></div>
this will clear the floats and place your next block under the floated ones as normal (starting top left).
i'm not entirely sure why the background color doesn't display for you, but maybe the above will solve it.
