The impossible html layout?

Question

I'm attempting to create a page layout similar to what is shown below (CSS only with support for Chrome, Firefox, IE8+)

Note: columns 1,2,3 can all dynamically grow (e.g. appending markup from xhr etc) and they should all be the same height (the height of the largest column). Also, cell 4 can also grow although should only be the height of its internal content.

 _______________
|   |_____4_____|
|   |       |   |
| 1 |   2   | 3 |
|   |       |   |
|___|_______|___|

I'm having a problem achieving this cross browser.

My Attempt: I've created a simplified jsfiddle example to show my attempt using tables (using rowspan / colspan) to get the desired layout. I suppose this is in essence a multi column css layout with a twist...

Although tables should generally not be used for layout. It seemed to be the least hacky way of achieving the desired results cross browser.

I've used a js timeout to adjust the height of one of the columns (to simulate dynamic appending of content).

Problem with my attempt:

In Firefox (and IE9/ IE8), cell '4' (green cell in jsfiddle) will not respect its set pixel height (height becomes larger) when column 1 (red cell) grows dynamically. View the fiddle in Firefox to see the issue. Why does cell 4 grow when cell 1's height is updated?

This is NOT a problem in Chrome.

Answer 1

Using the technique described in this article Andrew added in a comment above, I was able to create a workable cross-browser (well IE8+) solution you can find - here

The markup is pretty simple and requires no tables

<div class="container">
    <div class="leftCol">left col
        <div class="leftColContent"></div>
    </div>
    <div class="header">header</div>
    <div class="centerCol">center col</div>
    <div class="rightCol">right col</div>
</div>

Answer 2

Would something like this be of any help?

http://jsfiddle.net/cku7y/5/

<div class="wrapper">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="violet"></div>    
</div>

(check jsfiddle css) It can of course be improved, but it's a start without using tables.

Answer 3

I'm pretty sure you can do it this way.

http://jsfiddle.net/V3ta3/2/

Set a double container and you don't need any fixed values.

<div class="container">
<div class="wrapper">
    <div class="column1">
        <p>Column 1</p>
    </div>
    <div class="wrap-right-side">
        <div class="column4">
            <p>Column 4</p>
        </div>
        <div class="right-side">
            <div class="column2">
                <p>Column 2</p>
            </div>
            <div class="column3">
                <p>Column 4</p>
            </div>
        </div>
        <!-- end right side -->
    </div>
    <!-- end wrap right side -->
</div>
<!-- end wrapper -->
</div>
<!-- end container -->

This only problem is the float preventing the full height of the red column. So you need to find a way to clear the float.