javascript - Multiple hero-units to be the same height -

i have <div> 3 span4s inside it, hero-unit inside each span4. inside each hero unit text , picture.

here demo: http://jsfiddle.net/ggmwx/256/

and code, in case link breaks in future:

<div class="row-fluid">      <span class="span4">         <div class="hero-unit" id="col1">             <h1 class="heading">one</h1>             <p>lorem ipsum</p>             <img src="http://dummyimage.com/100x400/000/fff" class="image" />         </div>     </span>     <span class="span4">         <div class="hero-unit" id="col2">             <h1 class="heading">two</h1>             <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>             <img src="http://dummyimage.com/100x200/000/fff" class="image" />         </div>     </span>     <span class="span4">         <div class="hero-unit" id="col3">             <h1 class="heading">three</h1>             <p>lorem ipsum lorem ipsum lorem ipsum</p>             <img src="http://dummyimage.com/100x200/000/fff" class="image" />         </div>     </span> </div> 

i can't life of me figure out how make hero-units same height. have tried following none of them work various reasons (some of them work text no picture, 1 of them works plain text no tags inside outer div tag). or perhaps i'm missing -- i'm new this.

http://tomdeater.com/jquery/equalize_columns/

http://jsfiddle.net/4hxvt/

http://www.filamentgroup.com/examples/equalheights/ , http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

any ideas?

you have iterate items once document has loaded, tallest one, , set them height so:

highest = null hi = 0; $(".hero-unit").each(function(){     var h = $(this).height();     if(h > hi){         hi = h;         highest = $(this);       }     }); if(highest !== null){     $('.hero-unit').css('height', highest[0].scrollheight + "px"); } 

http://jsfiddle.net/ggmwx/261/