2 columns of equal height - Twitter's Bootstrap 2.0

Question

Well, everybody knows that Twitter\'s Bootstrap is a great tool and makes a lot of things easier for those who, like me, doesn\'t know much about CSS yet. But, sometimes, it can

Answer 1

The one that has always worked for me is:

#myPWrap,#otherPWrap {
  overflow:hidden;
}

#myP,#otherP {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

You can also try to turn the wrap into a table and the #myP into a table col.

#myPWrap,#otherPWrap {
 display: table;
}

#myP,#otherP {
 display: table-cell;
}

Answer 2

I solved this with a custom jQuery max plugin:

$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get() ); 
}

Here content-box is my internal column element, content-container is the wrapper that contains the columns:

$('.content-box').height(function () {
  var maxHeight = $(this).closest('.content-container').find('.content-box')
                  .max( function () {
                    return $(this).height();
                  });
  return maxHeight;
})

Hope this helps.