Make two parallel `` colums the same height

Question

Suppose I have two columns, both represented by a

block. Both columns may grow larger than the other, so I want to force the smaller one to grow as

Answer 1

Here's another approach using 2 containers that I used recently

    

        

            a
b
c
        
        

            a
        
    

CSS:

.container2 {
    clear:left;
    float:left;
    width:100px;
    overflow:hidden;
    background:blue; /* column 2 background colour */
    color: white;
}
.container1 {
    float:left;
    width:100px;
    position:relative;
    right:50%;
    background:green; /* column 1 background colour */
    color: white;
}
.col1 {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    overflow:hidden;
}
.col2 {
    float:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
}

Fiddle: http://jsfiddle.net/Lunf6/1/ Inspired from: http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm