As web developers, we need to follow the design provided for us. We need to do all possibilities to deliver the website exactly the same or closely enough to the actual design.

One of the common part of the design is the grid boxes. Sometimes boxes are aligned vertically and horizontally. To keep the design cleaner, the designer will make the boxes in the same height and only put partial texts with the same quantity just to make the boxes sizes the same.

Following the design that way is hard for developers because even though we can control the number of strings to be inserted in each box, the characters has different sizes, those will make the boxes sizes different from each other.

The solution for this is to assign the same height to the boxes. If we are are going to assign a height directly to CSS, chances are content might overflow into the boxes if the height is too small for the content.

To solve this, i created a jQuery script that will calculate all the target element’s heights and use the largest value as the height for all target elements. This will make all the target elements in same height.

Since the script is dependent to jQuery, we need to include jQuery library into the page template.

<head>
	...
	<script src="jquery.js"></script>
</head>

Then copy the code below and paste it into your page template (inside the <script> tag or into your JavaScript template). The code is commented to help explain each process.

jQuery(function($) {
	var elem = $('.sameheight .inner');

	setSameHeight(elem);
	function setSameHeight($elem) {
		var elemHeight = [];

		//lets loop into our containers and find each height
		//lets put the height into an array
		$elem.css({ height: 'auto' }).each(function () {
			elemHeight.push($(this).innerHeight());
		});

		//lets find the highest value from the array
		var maxHeight = Math.max.apply(Math, elemHeight);

		//lets reset the array
		elemHeight = [];

		//lets set the highest value as the height of all elements
		$elem.css({ height: maxHeight });
	}

	$(window).resize(function() {
		setSameHeight(elem);
	});
});

Is the script responsive?

Absolutely. The script will recalculate the heights of all the target elements when the browser is resized and again use the highest value as the height for all target elements.

Open the demo link below to see the script in action.