Having Panels(Blocks) with the same height

anyone knows the solution for this?
I'm getting frustrated getting this done :(

Here's what I did:

Thanks to Eric for his great blog post 'Using jQuery to ensure Panel columns are the same height'. This gave me a great head start to making panels in the same row an equal height.

I place the following jQuery code in the scripts.js file in my themes folder.

Add this line to your themes .info file if it is not already there.

scripts[] = scripts.js

Then go in to the css properties settings of each panel (found in the panel content screen where you configure what each panel displays) and give each panel in the same row the same class. In my code I have set it up to use the class panelheight1, panelheight2 etc. This code will look for these classes up to panelheight5...just increase the loop iterations if you need more than 5 classes (5 rows of panels!).

$(document).ready(function(){

	for(i=1;i<=5;i++) {
	
	  // keep track of the tallestCol column in each row [i]
	  var tallestCol = new Array();
	  tallestCol[i] = 0;
	  
	  var panelclass = '.panelheight'+i;
	    
	  // loop through columns in this row and find the tallestCol 
	  $(panelclass).each(function(){
	    if ( $(this).outerHeight(true) > tallestCol[i] )
	      tallestCol[i] = $(this).outerHeight(true);
	  });
	
	
	  // loop through columns in this row and adjust height as necessary
	  $(panelclass).each(function(){
	   
	    // check if current column needs to be adjusted
	    if ( $(this).outerHeight(true) < tallestCol[i] ) {
	      // set new height
	      $(this).height( tallestCol[i] );
	    }
	  });
	}    
});

This worked well for me. Be aware though that Panels containing AJAX pagers/content will readjust your panel height again as will changing text size via text sizer widgets.

Hope that helps,
Mat :)