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).
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.
- Make sure your html has the latest version of jQuery attached
Download the Code
How to Use It
- Setup your HTML – this function requires that the elements to match all have the same class
Here’s an example…
- Call the function using the container class and the elements to match class like so