Two column layout

Here is what I'm trying to do.

I have two columns. Let's call them col1 and col2. I want it so that if the height of col2 increases, the height of col1 will increase accordingly to the same height. How can I achieve this?

I know that I can do i开发者_StackOverflow中文版t using tables, but I'm looking for a css-based solutions.

There are a ton of tutorials on Google:

http://www.google.ca/search?sourceid=chrome&ie=UTF-8&q=same+height+columns

Other stuff here:

Equal height columns in jQuery

As CSS - Equal Height Columns? already explains the best resource probably is http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

Basically you have wrappers around your columns and they become your actual backgrounds and not the columns themselves.

You can fake it with an image using the faux columns technique, but you can do it just with CSS - http://jsfiddle.net/spacebeers/s8uLG/3/

You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        <p>Content 1</p>
   </div>
   <div class="col2">
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
        <p>Content 2</p>
   </div>
</div>

EDIT: If you want a border round it then have a look at this example - http://www.ejeliot.com/samples/equal-height-columns/example-6.html