JavaScript

Complete Guide for Beginners: Easily Equalize Heights of Side-by-Side Elements with jquery.matchHeight.js

 

Improving UI/UX in web development significantly impacts the user experience. Especially when side-by-side elements have uneven heights, it can disrupt the visual appearance of the site.
In this article, we’ll show you how to easily equalize the heights of side-by-side elements using jquery.matchHeight.js. This technique is simple enough for beginner engineers to implement and helps create visually consistent pages.

Contents
  1. Basic CSS Settings
  2. Adding jQuery and jquery.matchHeight.js
  3. HTML Markup
  4. Demo Page: Equalizing the Height of Uneven Side-by-Side Elements Using jquery.matchHeight.js
  5. Source: matchHeight.js
  6. Summary

Basic CSS Settings

First, let’s set up the CSS to create side-by-side elements. In the example below, we use <li> tags to display the elements horizontally. Feel free to adjust background colors and font sizes as desired.

<style type="text/css">
<!--
h1{
  text-align: center;
  padding: 10px 0;
  font-size: 18px;
}
ul{
  width: 1000px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}
ul li{
  width: 160px;
  padding: 10px;
  margin: 10px;
  float: left;
  background: #333;
  list-style: none;
  color: #fff;
  font-size: 14px;
  line-height: 1.6em;
}
-->
</style>

Adding jQuery and jquery.matchHeight.js

Next, add the jQuery and jquery.matchHeight.js scripts to your page. This allows you to equalize the height of specified elements using JavaScript.
Load the jquery-1.11.0.min.js and jquery.matchHeight.js files. Specify the <li> elements (.list) whose heights need to be equalized.

<script src="./jquery-1.11.0.min.js"></script>
<script src="./jquery.matchHeight.js"></script>
<script>
$(function() {
  $('.list').matchHeight();
});
</script>

HTML Markup

Create side-by-side elements using HTML. In this example, we insert varying amounts of text in <li> tags to create uneven heights.
Using jquery.matchHeight.js, the heights of <li> elements with different text lengths will be equalized.

<h1>Equalizing the height of uneven side-by-side elements using jquery.matchHeight.js</h1>
    <ul>
      <li class="list">TextTextTextTextTextTextTextTextTextTextTextText</li>
      <li class="list">TextTextTextTextTextTextTextTextTextTextTextTextTextText</li>
      <li class="list">TextTextTextText</li>
      <li class="list">TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText</li>
      <li class="list">Text</li>
      <li class="list">TextTextTextText</li>
    </ul>

Demo Page: Equalizing the Height of Uneven Side-by-Side Elements Using jquery.matchHeight.js

If you want to see an example where this method is used to equalize heights, refer to the demo page below. You can observe how it works in real time.

Demo Page Using jquery.matchHeight.js

Source: matchHeight.js

For more details about jquery.matchHeight.js, please refer to the official website below.

matchHeight

Summary

Using this method, you can easily equalize the heights of side-by-side elements. This technique is particularly useful in responsive web design. It’s beginner-friendly, so give it a try!

* Please use this technique at your own risk.
Do not reuse the Google Analytics tag inside the <head> of the demo page.

jquery.matchHeight.js
RELATED POST