Ever had parallel boxes on a website you’re developing, and wanted them to have the same height, but still wanting them to have dynamic height, i.e. not having to lock them to a certain height in the CSS? I certainly have, and it’s usually difficult. But jQuery provides a simple sollution!
Say this is our starting point:
Two boxes, with different content, and thus different height. These two can quite easilly be made to have the same height, with a bit of jQuery magic. We start out by identifying them, adding a unique ID for each box. In this example I’ve simply called them #box1 and #box 2:
Then I utilize the following script, which will measure both boxes, find the one that is highest, and then apply that height to the shorter one:
The result will be this:
Easy as that!