Comments on: Equal Height Blocks in Rows

By: Hussain

Hussain — Sun, 13 Mar 2011 03:52:52 +0000

I tested so many jquery equal height codes and plugins, this one is absolutely the best one… I wonder if it is possible to make a plugin of it?

By: Resimleri

Resimleri — Fri, 18 Feb 2011 23:41:57 +0000

I was looking for it. Thank you very much.

By: Tom

Tom — Thu, 17 Feb 2011 12:24:30 +0000

Use “outerHeight” instead to get the correct dimensions for elements with padding/margin.

http://api.jquery.com/outerHeight/

By: Dave McFarland

Dave McFarland — Fri, 11 Feb 2011 22:21:10 +0000

Yeah, I was looking at that too. First, that code is in their twice. The first instance, after the if (currentRowStart != topPostion) isn’t neccessary. The second instance (toward the bottom after the // do the last row) runs once for each item in the jQuery collection and will take care of . This is inefficient because you end up setting the heights on a row once for each column in that row.

Ideally, you would set the heights just once the each row after the each(). I’m sure the performance hit is pretty small for a just a handful of rows and columns.

Another problem, is that if you have top or bottom padding in just one of the items, then the heights are measured accurately. Just something to keep aware of. Tom Deater’s equalize columns plugin solves the padding problem: http://tomdeater.com/jquery/equalize_columns/
However, that plugin doesn’t provide a way to equalize columns by row–which this code does.

By: Dave McFarland

Dave McFarland — Fri, 11 Feb 2011 20:34:13 +0000

You plugin doesn’t actually maintain the chain. You need to return the objects : http://docs.jquery.com/Plugins/Authoring#Maintaining_Chainability

By: Dubweiser

Dubweiser — Tue, 08 Feb 2011 22:17:32 +0000

Maan! Where was this a month ago. Tried fixing these damn columns for hours. Dubweiser.net

By: zj

zj — Mon, 07 Feb 2011 12:54:40 +0000

Should the following code be put outside of the “each” loop?

// do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { rowDivs[currentDiv].height(currentTallest); }

That way you can save lots of unnecessary height setting…

By: Kris Handley

Kris Handley — Sat, 05 Feb 2011 13:45:34 +0000

Just because you can, doesn’t mean you should.

By: Kris Handley

Kris Handley — Sat, 05 Feb 2011 13:43:55 +0000

I had a version of this where i had to set the number of columns as an argument, but this is much nicer :)

I made a jQuery plugin out of this to maintain chaining. And also minified it.

Hope you don’t mind :) Feel free to fork it or whatever.

https://github.com/krishandley/jQuery-Equal-Height-Blocks

By: Ignacio Segura

Ignacio Segura — Sat, 05 Feb 2011 13:43:29 +0000

I actually found a method to do exactly this using just CSS. Yes, you can.

http://www.isegura.es/blog/two-columns-same-height-using-css-and-no-javascript-yes-you-can