Setting Equal Heights using jQuery

Creating the visual effect of equal-height columns or content boxes has been a challenge ever since we abandoned table-based layouts. When developing complex web applications or site designs we’ve found that it often makes the most sense from a usability and performance standpoint to use a simple JavaScript workaround: our equalHeights() function determines the heights of all sibling elements in a container, and then sets each element’s minimum height to that of the tallest element. When JavaScript is disabled, the boxes or columns appear with varying heights, but the content remains legible and the page is still completely usable.

Setting Equal Heights with jQuery

Resoucre: Sample | Tutorial

Related posts:

1. Easily fade any element inside a container using jQuery.
2. Create custom corners using jQuery
3. Awesome customizable layout plugin using jQuery
4. Accessible Slider with Select element using jQuery
5. jQuery UI Selectmenu: Styling a Custom HTML Select Element