Lab Entry

Equalize the height of child elements

Here’s a cool little jQuery plugin that I wrote in order to solve a problem that I’ve frequently encountered with floated elements. That problem is that there’s really no way to dynamically set a height across elements within a single row. Well, this plugin will do just that… and not only will it do it but it will determine whether the elements are all within a single row.

View & Download on GitHub

What is does

heightEQ will first perform calculations to determine if all the elements fit into a single row and if so it will set the height of those elements to the height of the tallest one found in that row.



First and foremost, make sure that jQuery and the heightEQ plugin scripts are loaded. For example, make sure this (or your own variant) is included in your head:

<script src="//"></script>
<script src="//"></script>

After that is done you simply attach heightEQ to the parent container and it will find direct children elements and perform calulcations. Like so:

jQuery(document).ready( function($) {

Your HTML should look something like this:

<div id="heighteq">
    <div class="column">Text here</div>
    <div class="column">Text here</div>
    <div class="column">Text here</div>
    <div class="column">Text here</div>

In the example HTML above, heightEQ will loop through all the children elements and make adjustments from there. Simple as that.

Comments (4)

  • This is really interesting, You are a very skilled blogger. I’ve joined your rss feed and look forward to seeking more of your excellent post. Also, I have shared your site in my social networks!

  • Hi, Neat post. There is a problem along with your site in internet explorer, may check this?K IE nonetheless is the marketplace leader and a large portion of folks will leave out your excellent writing because of this problem.

  • Great V I should definitely pronounce, impressed with your site. I had no trouble navigating through all tabs as well as related information ended up being truly easy to do to access. I recently found what I hoped for before you know it at all. Quite unusual. Is likely to appreciate it for those who add forums or anything, web site theme . a tones way for your customer to communicate. Excellent task..

  • website says:

    Some truly wonderful info , Gladiola I observed this. “What you do speaks so loudly that I cannot hear what you say.” by Ralph Waldo Emerson.

Leave a Reply

Your email address will not be published.

© Copyright 2022 - Chicago Web Design & Development