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

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

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

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

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.