Question

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!

Answer 1

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>