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