Each column has a fixed width of 200px with a 20px margin.
The top-left box and the columns have variable height.
Like this
Tor Valamo kindly provided an answer to a similar question (that being elastic, this is fixed), but I cant centre the layout, as it uses position: absolute.
How can I do it? I know that using a table with colspan and rowspan the answer to this problem is trivial, but I would like to avoid table-based layout like the plague!
Not sure I understand exactly what you're asking, but something like this...?
<div style="float: left;">
<div style="width: 420px;">top</div>
<div style="width: 200px; float: left;">bottom left</div>
<div style="width: 200px; float: left;">bottom right(ish)</div>
<div style="clear: both;"></div>
</div>
<div style="width: 200px; float: left;">big left box</div>
<div style="width: 200px; float: left;">big right box</div>
You can still use the layout that you linked to and have it be centered, despite the position: absolute. I've adapted it for you here (you'll have to tweak to add in the margins, but it works, I tested it:
<html>
<head>
<style>
#outer, #left, #right, #top_left, #bottom_left,
#bottom_left_left, #bottom_left_right, #right_left, #right_right {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
border:1px solid #000;
}
#outer {margin:0 auto; position:relative;width:800px;}
#left {right:50%;width:400px;}
#top_left {position:relative; width:400px;}
#bottom_left {position:relative;}
#bottom_left_left {right:50%; width:200px;}
#bottom_left_right {left:50%; width:200px;}
#right {left:50%;}
#right_left {right:50%; width:200px;}
#right_right {left:50%; width:200px;}
</style>
</head>
<body>
<div id="outer">
<div id="left">
<div id="top_left">Top left</div>
<div id="bottom_left">
<div id="bottom_left_left">Bottom left</div>
<div id="bottom_left_right">Bottom right</div>
</div>
</div>
<div id="right">
<div id="right_left">Near Right</div>
<div id="right_right">Far Right</div>
</div>
</div>
</body>
</html>