Same Height Divs

So how really do you get the height of the longer div and apply it to another so that they would have equal height?

Simple. By JS! I’m not in a master-level when it comes to jQuery or JavaScript; I still run to Stack Overflow and jQuery documentation to get a general knowledge of which does what.

Assuming you’re using jQuery in your little web page, follow me on this short walkthrough:

[code lang=”js”]
$(document).ready(function() {

var $longerDiv = $(‘#long-div’).height();

$(‘#short-div’).css(‘min-height’, $longerDiv+"px");


This line creates a variable named “$longerDiv” and it gets the pixel height of the #long-div element in your HTML mark-up.
[code lang=”js”]var $longerDiv = $(‘#long-div’).height();[/code]

And this one applies that number (without the “px”) into the css property, “min-height” and we add “px”.
[code lang=”js”]$(‘#short-div’).css(‘min-height’, $longerDiv+"px");[/code]

Check out the demo on jsFiddle:

There might be a better way in doing this — hit up the comments!

Other code-testing sites on CSS-Tricks:


Leave a Reply

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