Twitter Bootstrap Legacy: Uniform height on spans

Question

See the following image:

What I need is to enlarge the B column to match the first column height, or if I had several columns they always maintains the same height, adjusting to the largest column height.

I have been playing for a while without any success with <div class="clearfix"></div> and height: 100%.

I'm using Twitter Bootstrap 2.3.2.

HTML:

 <div id="main" class="row-fluid">
        <div class="span6">
            <div>
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBB
            </div>
        </div>
        <div class="span6">
            <div>
                B
            </div>
        </div>
    </div>

CSS:

@import url("http://twitter.github.com/bootstrap/assets/css/bootstrap.css");

        #main {
            height: 5em;
        }
        .span6 {
            background-color: lightgray;
            border: 1px solid red;
        }

        .span6 > div {
            background-color: lightblue;
            border: 1px solid green;
        }

For some reason the fiddle don't resembles the image with the above code, but if you paste it into a test.html it works properly.

EDIT:

And how can I align the height of the inner span divs?

EDIT 2:

With @Coop guidance I finally managed to have this sorted out. I come to the following code:

var content_height = [];

jQuery('.row-fluid > div')
    .each(function () {
        content_height.push(jQuery(this).css({minHeight: 0}).height());
    })
    .each(function () {
        jQuery(this).css({

        minHeight: Math.max.apply(Math, content_height)
        });
    });

Answer 1

To do this with a jQuery solution:

First add the class eHeight to all divs in a row you want to give the same height. Then add the jQuery below:

$('.eHeight').each(function () {
  var eHeight = $(this).parent().innerHeight();
  $(this).outerHeight(eHeight);
});

See fiddle here: http://jsfiddle.net/VA6D4/

Note that the jQuery needs to be in a $(window).load because Google Chrome gives 0 height and width to images before they load.

Answer 2

See this Fiddle You can do it by adding big padding with big negative margin and then wrap your span with overflow: hidden;

CSS

.sameheight {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:green;
}
.wrap {
    overflow: hidden;
}