2 Column Layout with floats

[SharkBait]

I'm stuck, and not sure how I go about doing it.

Currently I am using a 2 column layout with floating div tags. The right div is 150px and the right tag is 650px.

The issue I have is that if the left column is longer than the right column, then the right column does not expand all the way down to the bottom of the page and since my background colour is different than the colour of the right div tag, it looks bad.

How can I fix this, without using the CSS attribute max_height (since IE doesn't recognise that)?

[obsidian]

you've got to use pseudo-columns. basically, you want to "fake" the background-color of the right column. you can do this by making a 1px tall image the full width of your page. the right 150px of that image will be the background-color of your right hand column, and the rest of the image would be the background-color of the left column. then, all you have to do is set it as the background of your body (or containing div) with a repeat-y and align top left, and you're good. of course, your containing div would have to have some sort of clear fix on it to be sure it drops below both columns... check out [url=http://www.positioniseverything/easyclearing]this tutorial and code snippet[/url] for the best way to clear floats in all browsers.

[ToonMariner]

if the left column is the column floated then simply insert <div class="clear"></div> immediately before the closing tag of your right column.

Then in your style sheet place

div.clear {
clear: both;
}

If it is the right column that is floated then obsidians method is the only viable option to get it to LOOK like it works.