Probably just about every web developer has run into this problem. You have a two or three column layout on your website and your center column has a ton of great content that spans a very long way down the page and your side bars are short. They are different colors and they just look funny. Well today I have the solution for you!

Using jQuery you can actually tell your columns to become the same height as the longest column. It is actually very easy to do and you will find that you use this over and over again.

Let’s take a look at the code:

function heightmatch(columns) {
 var highest = 0;
  for( var i in columns ) {
   if( $(columns[i]).height() > highest ) {
    highest = $(columns[i]).height();
   }
  }

  for( var j in columns ) {
   $(columns[j]).height(highest);
  }
}


As you can see the code is very simple. You pass the function an array of your jQuery selectors that you want to be the same height and it goes through, finds the longest one, and then sets the height of all of them to the tallest value.

Very simple. You can expect this to be in the jQuery Toolkit that I we are planning on putting together.