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.

© Copyright 2024 - Chicago Area Web Developer