Question

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 the content in either left or main could be the maximum height.

Answer 1

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!