Equal Column Heights with Divs using CSS or jQuery

I am not a huge fan of using tables, in fact, most front end projects I do I usually use divs just because I think they’re nicer to look at than tables. So recently I needed to display some data in a table format which means I needed a way to make all the columns in each row the same height. There are a few different ways to do it without using tables.
One of the ways that I don’t like is faux columns. Basically this is just using a repeating background image to give the illusion of equal height columns.

Another way that is rather nice is using jQuery. All you need to do is include jQuery and a plugin called ‘equal heights’. Then include the following code. The “row1” is the class name that you’ll give each of the columns in row one.


$(document).ready(function(){
    	$(function(){
    	    $('.row1').equalHeight();
   	});
    });

The html of it would look something like this.


 <div class='row1'>
   lLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> Ut aliquet
 nulla eu felis. Donec porta <br/>
    aliquam ipsum. In ac nibh. Nunc dictum. Curabitur rhoncus facilisis nunc.
  </div>
  <div class='row1'>
   lLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> Ut aliquet
   nulla eu felis. In ac nibh. Nunc dictum. Curabitur rhoncus facilisis nunc.
  </div>
  <div class='row1'>
  	This is some text.
  </div>

And that is it besides styling each div however you want.

A lot of people might not want to include the javascript or just rather not use javascript to change the height of a div. So another way equal columns can be done is by setting a very high padding for each div and then setting the margin to be negative that. You need to wrap a div around it setting the overflow to hidden. Plus if you want borders around each row you won’t be able to set the border-bottom any more so you can simply set the border-top for each one and then add a border-bottom to the wrapper div.


<div id='row_wrapper' style='float:left; overflow:hidden;
                 border-bottom:1px solid black;'>
    <div id='column_1' class='other'>  lLorem ipsum dolor sit amet, consectetur adipiscing elit.
       <br/> lLorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <div id='column_2' class='other'>  lLorem ipsum dolor sit amet,
       consectetur adipiscing elit.<br/>lLorem ipsum dolor
    </div>
    <div id='column_3' class='other'> lLorem ipsum dolor </div>
    <div id='column_4' class='other' style='border-right:1px solid black;'>
     lLorem ipsum dolor
    </div>
    <div style='clear:both;'></div>
</div>
    <div style='clear:both;'></div>

View the example of using both jQuery and just CSS here

Comments are closed.