Match Heights of Elements

In the world of HTML and CSS, some things just don’t always act or react the way you’d expect or would want to. Such is the case when it comes to creating columns or just several elements that you’d want to be the same height at all times even when the contents of each column fluctuates in volume.

Take for instance these 3 divs, floated side by side with different content (I’ve set background colors on them to be able to visually see their heights).

match-heights-1

Setting elements to 100% height in your css only works when the parent container is a specific height – so in many cases this method is not the ideal solution. So I wrote a function to determine the height of the tallest element within a container and set all the elements to that height. As you can see with the function in place all the elements become equally sized.

match-heights-2

Requirements

  1. Make sure your html has the latest version of jQuery attached

Download the Code

How to Use It

  1. Attach the Match Heights script to your html page or copy the script into an already attached javascript file
  2. Setup your HTML – this function requires that the elements to match all have the same class
    Here’s an example…
    <div class=”match-height-container”>
    <div class=”match-this”></div>
    <div class=”match-this”></div>
    <div class=”match-this”></div>
    </div>
  3. Call the function using the container class and the elements to match class like so
    matchHeights(‘.match-height-container’,’.match-this’);

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

9 + 3 =