With the absence of table-less designs, creating equally proportionate “boxes” in HTML can be daunting. So, with the help of a couple of CSS tricks and jQuery, I’ll demostrate a cross-browser method of creating equally tall and wide boxes.
before:
after:
The new jQuery $.equalHeights([widths]) Plugin
$.fn.equalHeights = function(widths) {
$(this).each(function(){
var tallest = 0;
var widest = 0;
$(this).children().each(function(i){
if ($(this).height() > tallest) { tallest = $(this).height(); }
if (widths) if ($(this).width() > widest) { widest = $(this).width(); }
});
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) {
$(this).children().css({'height': tallest});
if (widths) $(this).children().css({'width': widest});
}
$(this).children().css({'min-height': tallest});
if (widths) $(this).children().css({'min-width': widest});
});
return this;
};
This plugin has been changed from the original to include the optional [widths] paramter instead of the previous [px]. You can now pass true if you need the plugin to apply the largest width across all children.
The JavaScript
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".boxes").equalHeights(true);
});
</script>
Here I pass true as an argument to ensure the plugin sets the widest min-width across all boxes.
The CSS
<style type="text/css">
.box {background:#39F; margin:0.5em;}
.boxes {background:#eee;}
.iblock{
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
}
</style>
Using the .iblock class is a great trick for getting boxes to look and behave properly throughout the most popular browsers- IE6 to the latest Firefox. I discuss it further here.
The Markup
<div class="boxes"> <div class="box iblock">Hello</div> <div class="box iblock"><p>Hello</p><p>World. How are you?</p></div> <div class="box iblock">Hello</div> <div class="box iblock">Hello</div> </div>
This chunk of HTML shows the basic markup for the boxes in this demo.
The Full HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Boxes and Grids</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".boxes").equalHeights(true);
});
$.fn.equalHeights = function(widths) {
$(this).each(function(){
var tallest = 0;
var widest = 0;
$(this).children().each(function(i){
if ($(this).height() > tallest) { tallest = $(this).height(); }
if (widths) if ($(this).width() > widest) { widest = $(this).width(); }
});
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) {
$(this).children().css({'height': tallest});
if (widths) $(this).children().css({'width': widest});
}
$(this).children().css({'min-height': tallest});
if (widths) $(this).children().css({'min-width': widest});
});
return this;
};
</script>
<style type="text/css">
.box {background:#39F; margin:0.5em;}
.boxes {background:#eee;}
.iblock{
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
}
</style>
</head>
<body>
<div class="boxes">
<div class="box iblock">Hello</div>
<div class="box iblock"><p>Hello</p><p>World. How are you?</p></div>
<div class="box iblock">Hello</div>
<div class="box iblock">Hello</div>
</div>
</body>
</html>
