Trying to get a specific table behavior out of divs

Ok, I have a two column layout. And I'm trying to get the bottom of the div stacks to match each other.
Here's the stripped down code I've been playing with to try to create this behavior.

<div style="width:600px;">
 
    <div style="width:50%; background-color:#66C; float:right; text-align:center;">
    	<img src="#" width="150" height="300"  alt="Fake Content"/><br />
    </div>
 
    <div style="width:50%; height:150px; background-color:#0F0;">1</div>
    <div style="width:50%; height:30px; background-color:#C96;">2</div>
    <div style="width:50%; height:50px; background-color:#CCC;">3</div>
    <div style="clear:both;"></div>
 
</div>

So the size of div #1 is always fixed, #2 contains dynamic content, and #3 is fixed content and I would like the height of div #3 to stretch to match the right column if the right side contains more content.

For the right column the content is also dynamic, and I'd like it to stretch to match the bottom of #3 if the left site contains more content.

So basically, the height of both column will vary and I'd like the shorter of the 2 to stretch. I looked around and experimented a bit with some success, but not exactly the behavior I was looking for. A couple things that have been giving me trouble are that the left column consists of multiple divs (which out maneuvered my attempts at using 100%height), and the right column is floated. I don't know how else to put the right column on the right side other than to use a float or absolute position (and absolute won't expand the parent div) because both columns are dynamic...

...and now, here's exactly the behavior I'm looking for and would have already coded into my site if I was still building sites using tables... which I'm not.

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="150" bgcolor="#0F0">#1</td>
    <td rowspan="3" align="center" bgcolor="#66C">
 
 
        <!-- ADJUST HEIGHT VALUE TO WATCH LAYOUT BEHAVIOR -->
        <img src="#" width="150" height="200"  alt="Fake Content"/> 
 
 
    </td>
  </tr>
  <tr>
    <td align="center" bgcolor="#C96">
    	<img src="#" width="150" height="10"  alt="Fake Content"/>
    </td>
  </tr>
  <tr>
    <td height="50" bgcolor="#CCC">#3</td>
  </tr>
</table>

Changing the height value of the fake "content" in the right column shows you how the base of both columns equals the length of whichever column has more content.

Now, I need to do this without using stupid tables.