Rows of Equal Height Boxes

The template below was written for the Twenty-Ten theme to show how to create rows of equal height boxes when the contents differ in length.

The frame is in two parts: top-frame and bottom-frame.

The bottom-frame ‘slides’ up and down behind the top frame to adjust the height.  Note that the range is limited – too much content in a frame will open a gap.

<?php
/*
Template Name: Equal Height

This template demonstrates a technique for showing rows of content
enclosed in equal-height frames.

*/

get_header(); ?><!-- file:equalheight.php in twentyten-child -->

<?php   // Some sample CSS
   $style = <<< END_OF_STYLE
<style type='text/css'>
.item_row_wrapper { width: 100%; margin-top: 10px; }
.item_row_header { height: 54px;
  background: url("http://localhost/test/wp-content/uploads/2011/02/top-frame.png")
  repeat top left;}
.item_row_header_1 { width: 200px; }
.item_row_header_2 { width: 400px; }
.item_row_header_3 { width: 600px; }
.item_row_header_4 { width: 800px; }
.item_row { background: url("http://localhost/test/wp-content/uploads/2011/02/bottom-frame.png")
    repeat-x scroll bottom left; min-height: 20px; overflow: hidden;
    }
.item_row_4 { width: 800px; }
.item_row_3 { width: 600px; }
.item_row_2 { width: 400px; }
.item_row_1 { width: 200px; }
.item_class_wrapper { width: 200px; min-height: 110px; float: left; }
.item_class { width: 140px; margin-left: 30px;
   overflow: hidden; max-height: 280px; }
img.item_image { width: 100% !important; height: auto !important; }
.item_bottom_pad { min-height: 20px; }
.clear { clear: both; }
</style>
END_OF_STYLE;
   echo $style;

   $post_type = 'parks';
   $posts_per_row = 3;
   $posts_per_page = 8;
   if (!$paged = get_query_var('paged')) {
      if (!$paged = get_query_var('page')) {
         $paged = 1;
      }
   }
   $args = array(
      'post_type' => $post_type,
      'posts_per_page' => $posts_per_page,
      'paged' => $paged,
      'caller_get_posts' => 1,
   );
   query_posts($args);
?>
      <div id="container">
         <div id="content" role="main">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

            <?php if (($post_counter % $posts_per_row) == 0  || $posts_per_row == 1) {
               if ($post_counter > 1) {
                  write_buffer($post_counter,$posts_per_row);
               }
               ob_start();  // Start a buffer
            }
            ++$post_counter;
            echo "<div class='item_class_wrapper'>\n";  // Start one post
            echo "<div class='item_class'>\n";
            // Output post data here ?>
            <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
               <h1 class="entry-title"><?php the_title(); ?></h1>

               <div class="entry-content">
                  <?php the_content(); ?>
               </div><!-- .entry-content -->
               <?php
               echo "</div><!-- End of item_class -->\n";
               echo '<div class="item_bottom_pad"></div>';
               echo "</div><!-- End of item_class_wrapper -->\n";  // End of post
               ?>

         <?php endwhile; // end of the loop. ?>
      <?php write_buffer($post_counter,$posts_per_row); ?>
<?php endif; ?>

            <div id="nav-below" class="navigation">
               <div class="nav-previous"><?php previous_posts_link( '%link', '<span class="meta-nav">' . _x( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
               <div class="nav-next"><?php next_posts_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', 'Next post link', 'twentyten' ) . '</span>' ); ?></div>
            </div><!-- #nav-below -->

         </div><!-- #content -->
      </div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php function write_buffer($item_counter,$items_per_row) {
      $op = ob_get_clean();
      $count = ($item_counter % $items_per_row) ?
         ($item_counter % $items_per_row) : $items_per_row;
      echo "<div class='item_row_wrapper'>\n";  // Start a new row
      echo "<div class='item_row_header item_row_header_$count'>";
      echo '</div><!-- End item_row_header -->';
      echo "<div class='item_row item_row_$count'>\n";
      echo $op;
      echo "<div class='clear'></div>";
      echo "</div><!-- End of item_row -->\n";
      echo "<div class='clear'></div>";
      echo "</div><!-- End of item_wrapper -->\n";
   }
?>