How to make equal height column in WordPress – Final solution


Equal height columns in WordPress is the ultimate aim of this article but before talking to that making equal height in normal html based website is little bit easy and I have seen lots of brilliant tutorial out there but none of them is suitable to apply in any CMS like WordPress that pulls the information from its database.
So let me share what is equal height column problem and how it is dealt in HTML.

Suppose we want two columns with different set of contents, then obviously they will render them in a different height box for example, we have the following CSS and HTML to render two columns


body{margin: 0 auto;padding:0px;}

.box {color:#000; width:48%; margin:1%; float:left;}

.left{background:orange;padding:20px;}

.right{background:yellow;padding:20px;}

HTML code to make two equal height columns


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Equal Height Column</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Equal Height Column Demo</h1>

<div class="box">

<div class="left">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, odit distinctio repellendus minus expedita praesentium nam facilis, molestiae molestias ex dignissimos totam voluptas minima voluptate quos. Accusantium temporibus saepe veniam. Ipsam possimus excepturi earum accusamus nihil minus soluta incidunt cum adipisci reprehenderit doloremque architecto eligendi id, nesciunt perspiciatis deserunt dolore cupiditate nisi sapiente dicta reiciendis animi? Soluta veniam vel corporis cum fugiat, alias culpa voluptatibus, necessitatibus libero accusamus recusandae maxime delectus explicabo facere minus reiciendis deserunt, cumque dolorem! Quas dolore at voluptas, Ipsam consectetur similique labore quaerat, id, reiciendis nobis fugiat saepe soluta magnam sed.</p>

</div>

</div>

<div class="box">

<div class="right">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsa molestiae saepe atque id quidem modi unde aperiam placeat inventore consequatur delectus eum, nesciunt, ut accusamus quasi consequuntur tempore praesentium eius consectetur facilis. Sit dolore ex, sunt laudantium perspiciatis, alias eum repellendus architecto deleniti asperiores, quas cum, at veniam fugit?</p>

</div>

</div>

</body>

</html>

but the output of the above code is just like this

Equal Column height final solution

Even height columns

 

The above code only display equal height of column when we have exact the same amount of information in all the column but it is not always true. So the brilliant people came up with this type of solution.

Now Adjust your CSS a little bit. The solution come in the form of Table, Table row and table cell so we have just added that spice in our CSS


body{margin: 0 auto;padding:0px;}

.box {color:#000;display:table;width:98%;margin-left:1%;}

.row{display:table-row;}

.left{background:orange;padding:20px;width:48%;display:table-cell;}

.right{background:yellow;padding:20px;display:table-cell; }

Your New HTML is like this ( Little bit adjusted one )


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Equal Height Column</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Equal Height Column Demo</h1>

<div class="box">

<div class="row">

<div class="left">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, odit distinctio repellendus minus expedita praesentium nam facilis, molestiae molestias ex dignissimos totam voluptas minima voluptate quos. Accusantium temporibus saepe veniam. Ipsam possimus excepturi earum accusamus nihil minus soluta incidunt cum adipisci reprehenderit doloremque architecto eligendi id, nesciunt perspiciatis deserunt dolore cupiditate nisi sapiente dicta reiciendis animi? Soluta veniam vel corporis cum fugiat, alias culpa voluptatibus, necessitatibus libero accusamus recusandae maxime delectus explicabo facere minus reiciendis deserunt, cumque dolorem! Quas dolore at voluptas, Ipsam consectetur similique labore quaerat, id, reiciendis nobis fugiat saepe soluta magnam sed.</p>

</div>

&nbsp;

<div class="right">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsa molestiae saepe atque id quidem modi unde aperiam placeat inventore consequatur delectus eum, nesciunt, ut accusamus quasi consequuntur tempore praesentium eius consectetur facilis. Sit dolore ex, sunt laudantium perspiciatis, alias eum repellendus architecto deleniti asperiores, quas cum, at veniam fugit?</p>

</div>

</div>

</div><!--end of table row div-->

</body>

</html>

Its result is – equal height columns like this

 

Equal height column using CSS and HTML table

Equal height using CSS only

Now the real problem start, it is fine for normal HTML based website where we exactly know the number of rows and number of columns in advance but it is now sure in case of CMS where a user have options to increase the number of post at any moment of time.

So what is the solution? Solution is the same – display them in a table format and the table would adjust the whole column accordingly.

BUT  how they would know when to add new row and when to close that row?  A small hack to do this is here in this code to implement in WordPress


$i=0; ?>

<div class="table">

<div class="table-row">

<?php

if( $my_query->have_posts() ) {

while ($my_query->have_posts()) : $my_query->the_post();

{ $i++; if($i%7==0) { echo '</div>'; echo '<div class="table-row">'; $i=1;} ?>

<div class="table-col">

<div class="image">

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">

<?php the_post_thumbnail(array('thumbnail'));?>

</a>

</div>

<div class="description">

<?php the_title();?>

</div>

</div>

<?php   }

endwhile; } ?>

</div> <!--end of table div-->

The above code start a new table as soon as your loop starts and also create a new row, when the column count reach at 7 it close the row and start a new row.  Here in the above code we are trying to display 6 articles in a single row.  Thus we again are able to get equal height of columns .

The CSS for the above is code is as follow

/* equal height columns—-*/

.table {

display: table;

border-collapse: separate;

border-spacing: 5px;

}

.table-row {

display: table-row

}

.table-col {

display: table-cell;

background-color:#fff ;

padding: 17px;}

[/code]

In this case it is learn that the last row does not close properly, thus not a recommended solution for all the situation.

The real solution for this type of problem now comes from Matching Height. Right now we are using this solution in our every product to produce equal height columns. Here is the solution


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Equal Height Column</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Equal Height Column Demo</h1>

<div class="box">

&nbsp;

<div class="left matchheight">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, odit distinctio repellendus minus expedita praesentium nam facilis, molestiae molestias ex dignissimos totam voluptas minima voluptate quos. Accusantium temporibus saepe veniam. Ipsam possimus excepturi earum accusamus nihil minus soluta incidunt cum adipisci reprehenderit doloremque architecto eligendi id, nesciunt perspiciatis deserunt dolore cupiditate nisi sapiente dicta reiciendis animi? Soluta veniam vel corporis cum fugiat, alias culpa voluptatibus, necessitatibus libero accusamus recusandae maxime delectus explicabo facere minus reiciendis deserunt, cumque dolorem! Quas dolore at voluptas, Ipsam consectetur similique labore quaerat, id, reiciendis nobis fugiat saepe soluta magnam sed.</p>

</div>

</div>

<div class="box">

<div class="right matchheight">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ipsa molestiae saepe atque id quidem modi unde aperiam placeat inventore consequatur delectus eum, nesciunt, ut accusamus quasi consequuntur tempore praesentium eius consectetur facilis. Sit dolore ex, sunt laudantium perspiciatis, alias eum repellendus architecto deleniti asperiores, quas cum, at veniam fugit?</p>

</div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="jquery.MatchHeight.js"></script>

<script type="text/javascript">

jQuery(function($){

$('.matchheight').matchHeight();

});

</script>

</body>

</html>

Now you know how to make equal column height. This jquery based solution is ideal to use on any situation. If you are aware of any other solution then kindly let me know.




4 Brilliant Comments - Join Discussion Now!

  1. Thanks for the info but is there is any other alternative to do this? Any help would be much appreciated.

    • rakesh says:

      Hi Sunil, There are one more alternative to do this in WordPress but as per my knowledge, jquery based solution is the best as it does not depend on tables. Thus used by the most famous websites around the world.

  2. I was looking for this past 2 weeks..
    Thanks for Sharing!
    Cheers!

    • rakesh says:

      Hi Punit, Happy to know that you find this tutorial on euqal height column useful. Keep in touch :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>