Creating Same Height Boxes (equal heights grid)

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>

rankandfile liked this
andresvidal posted this