Div Alignment FireFox，IE7，IE6

Question

I am having problems aligning a couple divs in IE6, IE7, IE8 and Firfox 3. They all don't render correct what IE8 and Firefox like the rest don't.

Is it possible to do this via floats and clears.. they dont need to have any spacing between them, I just drew it this way.... Also, the div's should be fixed widths.

alt text http://cowfarm.net/divAlign.png

Answer 1

Yeah, this is possible:

<table>
    <tr>
        <td></td>
        <td rowspan='2'></td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td colspan='2'></td>
    </tr>
</table>

I'm only kidding, of course.

Answer 2

You won't get equal heights for the 2 left DIVs combined and the right DIV. Unless ofcourse you specify those, or if the contents produce the same heights... But this shouldn't be a problem i think?

Update

<style type="text/css">
    #container {float:right;position:relative;}
    #left    {float:left;}
    #left_1  {float:left;}
    #left_2  {clear:left;float:left;}
    #right   {float:right;}
    #bottom  {float:left;clear:both;}
</style>

<div id="container">
    <div id="left">
        <div id="left_1">left 1</div>
        <div id="left_2">left 2</div>
    </div>

    <div id="right">right</div>

    <div id="bottom">bottom</div>
</div>