Multiple equal height box-bordered columns using CSS -- *without* background images?

What ways are there of coding a CSS layout with the following conditions:

1) Multiple equal-height columns, no fixed height given for any column, no knowledge of which will be the highest, the layout simply expands all columns according to whichever happens to contain the most content.

2) Each column is fully bordered.

3) No background images are used.

开发者_如何学编程4) Works in webkit, gecko, and... yep, IE6+. (well, I might accept an IE7+ answer).

If you'd like a visual, this:

is the relevant portion of the composition I'm trying to work up.

If I relax any one of the criteria, I'm familiar with a number of methods of accomplishing this. It's all of the criteria together where I can't figure out what to do.

Note that in particular, the full-border and no background-image requirements seem to knock out a number of high-profile solutions (for example, Matthew Taylor's "Perfect 3 Col Liquid Layout"). Please don't point to to something like this unless you can give specific instructions on how to tailor it.

---

Using this jquery plugin (http://www.cssnewbie.com/equalheights-jquery-plugin/) I was able to equalize three divs (tested in ie7 which is as far back as I care to remember) like so:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script language="JavaScript" src="jquery.equalheights.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var div1 = $("#div1").height(),
    div2 = $("#div2").height(),
    div3 = $("#div3").height(),
    top = Math.max(div1, div2, div3);

alert(top);

$(".divs").equalHeights(top,top);


})

</script>

<style>
.divs{
border: 1px solid #000; width: 100px; float: left
}


</style>

<div id="div1" class="divs">
border1
</div>

<div id="div2" class="divs">
border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2   border2
</div>

<div id="div3"  class="divs" >
border3
</div>