CSS 2 Column layout: Column height

I'm working on building a simple 2 column layout in html using div's

The problem is that I can't get the right column to have the same height as left.

<div id="container">

    <div id="left" style="float: left; width: 200px; background: #DDFFDD;">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
    </div>

    <div id="right" style="float: left; width: 600px; background: #DDDDFF">
        <p>main</p>
    </div>
</div>

As you can see the right column does not match the height of the left one. I'd like them to be equal

Edit: We will not know the height because the content inside the columns will be dynamic. And t开发者_StackOverflow社区he content in either left or main could be the maximum height.

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

this website has a very good explanation which I'd find hard to equal or top.

Good luck!

I'd advocate using a table for this exercise but that's a different debate.

Have you tried setting the height of your div's?

If you just want them the same height then declare it explicitly. If you want them to be able to both expand and the tallest one determines the height of both then please reword the question.

Just add the following to both of your style tags

style="height: 500px;"