CSS div layouts in place of tables

Question

Is there a way to, without tables, get three or four elements to align with each other like this:

I ask this because currently I am using tables, but the tables are refusing to allow me to make the "test" box a specific height, and make filler be the one that actually fills in the space. Currently, it will only allow filler to have a specified height, and requires that the "test" box fill in all remaining space. If you can find a way for me to set the height of the bottom row of a table, then I will accept that as an answer too, but I figured the best way to do this would probably be with css layouts

Answer 1

Yes. You can use a series of divs to mimic a table-like layout like in your screenshot.

For example, your HTML layout would be something like this:

<div class="header"><p>Top bar</p></div>
<div class="wrapper">
    <div id="leftCol">
        <div id="topLeft">Top Left</div>
        <div id="centerLeft">Filler</div>
        <div id="bottomLeft">Test</div>
    </div>

    <div id="rightCol">
        <p>SPAM!</p>                
        <div class="clear"></div>
    </div>
</div>​

Then you'd apply styling like so:

.clear {
    clear: both;
}


#leftCol {
    float: left;
    width: 300px; /* explicit width on left column */
}

#topLeft {
    height: 100px; /* arbitrary height of top left spot; do not define for auto-sizing */
}

#centerLeft {
    height: 50px; /* another arbitrary height */
}

#bottomLeft {
    height: 200px; /* another arbitrary height */
}

​

I've made a JSFiddle as an example. Basically you're floating your "left column" on the left and letting your content exist on the right.