Twitter Bootstrap Legacy: Uniform Span Altitude

Question

See the following image:

I need to increase column B so that it matches the height of the first column, or if I had multiple columns, they always support the same height, adjusting to the largest column height.

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

I am 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 is not like the image with the above code, but if you paste it into test.html , it works correctly.

EDIT:

And how can I align the height of the inner span div s?

EDIT 2:

I finally figured out the @Coop manual. I came 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 using jQuery's solution:

First add the eHeight class to all eHeight in the row that you want to assign to the same height. Then add jQuery below:

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

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

Note that jQuery must be in $(window).load , because Google Chrome gives 0 the height and width of the image before loading them.

Answer 2

See this Fiddle . You can do this by adding a large add-on with a large negative margin, and then wrap the span with overflow: hidden;

CSS

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