Ensure certain elements on a page display in matching heights throughout.

There are some new CSS tricks coming out that will allow for this to be done natively, but until then, here’s a way to make sure that all elements in a page, say gallery thumbnails or excerpts from posts, all display their full texts and are all sized the same.  Without using this fix after page load, some elements may display taller than others, and if these elements are floating in the page, they may definitely not display in a nice even grid as intended.same-height-of-elements-in-pageWith a few lines of jQuery (make sure you load the newest version via CDN) you just simply assign the elements you want to have the same height with the same unique class, like “same-height-group-1” or something short you can remember.  Then, change out the “.class-to-resize” in the script below with the actual class you assigned the elements.  From now on, after a page loads, all the elements assigned that same class will all have the same height, and you will never have to worry about those “sticky” floating blocks that ruin the whole look of your page.

<script type="text/javascript">
// You might probably want to envelope the below in a $(document).ready() function



if (this_h>max_h) { max_h=this_h;}


// Now, cycle through again to resize all elements to the maximum height

if (max_h>0){





About Author:

Senior Cloud Software Engineer and 25+ years experienced video production, video editing and 3D animation services for a variety of global clients including local video production here in Jacksonville, Florida.

1 thought on “Ensure certain elements on a page display in matching heights throughout.

  1. check checkbox with specific value ( using jQuery )

    To check/uncheck checkbox with specific value using jQuery.

    To check checkbox with id lead with “chk_hobby_” and has value = 7 :

    $(“#data-form input[id^=’chk_hobby_’][value=7]”).prop(‘checked’,true);

    To uncheck checkbox with id lead with “chk_hobby_” and has value = 2 :

    $(“#data-form input[id^=’chk_hobby_’][value=2]”).prop(‘checked’,false);

    HTML Sample :

    Watching Movie

Leave a Comment

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