Equal height columns with Bootstrap Buttons
Javascript with reasonable CSS fallback (buttons don't align but columns stay the same height)
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row-fluid col-wrap">
<div class="span4 col">
<p>left column</p>
<p>left cdfhdhgolumn</p>
<p>left column</p>
<button href="#" class="btn btn-primary">Do This!</button>
</div>
<!-- end span 4-->
<div class="span4 col">
<p>middle column</p>
<button href="#" class="btn btn-danger">Watch Out!</button>
</div>
<!--end span4-->
<div class="span4 col">
<p>right column</p>
<p>right column</p>
<p>right column</p>
<p>right column</p>
<p>right column</p>
<button href="#" class="btn btn-success">Amazing!</button>
</div>
<!-- end span 4-->
</div>
<!-- end row-fluid -->
</div>
CSS
.col {
background-color:#222;
position:relative;
}
.col-wrap {
overflow: hidden;
}
.btn{
margin-left:10px ;
}
p:last-child {
margin-bottom:209px ;
}
}
JavaScript
$.fn.equalHeights = function (px) {
$(this).each(function () {
var currentTallest = 0;
$(this).children().each(function (i) {
if ($(this).height() > currentTallest) {
currentTallest = $(this).height();
}
});
if (!px && Number.prototype.pxToEm) {
currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
}
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) {
$(this).children().css({
'height': currentTallest
});
}
$(this).children().css({
'min-height': currentTallest + 40 // THIS IS A FRIG - works for jquery but doesn't help CSS only
});
});
return this;
};
$(document).ready(function() {
var btnstyle = {
position : 'absolute',
bottom : '5px',
left : '10px'
};
$('.btn').css(btnstyle);
var colstyle = {
marginBottom : '0px',
paddingBottom : '0px',
backgroundColor : '#fbf'
};
$('.col').css(colstyle);
$('.row-fluid').equalHeights();
});