Match Element Height Width

Update: as of before 2019 this plugin is no longer needed (or maintained), just use Flexbox or Grid CSS.

Dilemma

Fairly recent question on the iThemes forum: “Is there a way to set the height of the content module with a sidebar to be the same?” I was looking up (again) the other day how this could be done with just CSS and without images. While some of the methods I found were rather ingenious, none of them seemed to quite fit the bill for what I was after. Thankfully, scattered amongst the search results were a few javascript examples, which gave me the idea to see what I could do with jQuery.

Solution

I wrote a WordPress plugin. So now all we have to do is use a shortcode to target the elements we want to match the heights and/or widths of. When targeting elements, simply use the same selector syntax you normally use when writing CSS code – or the selector syntax that jQuery allows.

The latest version (0.3) also includes the option to account for responsive layouts. Essentially what happens is when the target elements are “stacked” on top of each other, they will no longer have a specific height applied to them.

Oh, and keep in mind that this can be used for more than just making the content area and sidebars the same height. Use your imagination.

Have a great day!
Hugh

Hightlights

Match heights for all targeted elements:
Match widths for all targeted elements:
Match heights and widths for all targeted elements:
Separate multiple targets with a pipe (“|”).
Responsive:

Examples

In template files: <?php echo do_shortcode(' ') ?>

Download

Match Element Height Width (v0.3)

Change Log

Added support for responsive layouts, optional on a per use basis – (height only)

Added minified js file

Initial release