Small Layout Problem

Get Started
1

Ok, I have a two column layout. And I’m trying to get the base of the div stacks to match eachother.

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&#37;; 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 but I would like the height of #3 to stretch to match the right column when needed.

For the right column, the content is dynamic, and I would like it to stretch to match the bottom of #3 when needed.

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. The things that have been giving me the most trouble, is that the left column consists of 3 divs, and the right column is floated. From the left, I could probably get away with removing the content from #1 from it’s div and let it hang out in the parent div, but the other two really need their own containers. Also, 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…

Anyhow, I’m searching for suggestions.
One thing that sucks is I know this would be a non issue using tables, but this is a page layout and I’m not about to cave now.

2

I found a solution for this.

The trick was to apply a bottom padding to the #3 div and right column that was large enough to account for any potential differences in height, then add an equal negative bottom margin to bring the height of the parent div back up to meet the actual content. Then just add an overflow:hidden to hide the extended backgrounds and boom.

Learn something new everyday.