Make two columns the same height

Question

I\'m trying to make a 2 column design (using Twitter Bootstrap) with 2 columns of equal height.

Let\'s take this example:

Answer 1

And old classic is the faux columns technique. Works flawlessly in every browser and is easy to implement.

One downside however: You need to add a background image (and thus one more request, unless you're base 64 encoding your background).

Setting height/min-height to 100% is not possible on block level elements that have "auto height".

Answer 2

Try this:

http://jsfiddle.net/WTNeB/2/

notice that i added display:table and display:table-cell but also I changed the css selector names so that it gets the priority needed.

.row-fluid {
    border: 1px dotted gray;
    display: table;
}
.row-fluid .span2 {
    border: 1px solid blue;
    display: table-cell;
    float: none;
}
.row-fluid .span10 {
    min-height: 100%;
    border: 1px solid red;
    height: 100%;
    display: table-cell;
    float: none;
}