No worries! Sorry about that – I misunderstood the question!
Check out this link – Equal heights using jQuery. Now, I don’t know if you are familiar with javascript or comfortable modifying any .php or .js files, but I’ll walk you through how to do it. Hopefully it works like a charm!
1 – Navigate to your theme’s directory. Open up header.php
2 – Create a file that is called plugins.js and put it inside the /js folder inside of /wp-includes.
3 – Open up that plugins.js file and paste the following code:
/*--------------------------------------------------------------------
* JQuery Plugin: "EqualHeights"
* by: Scott Jehl, Todd Parker, Maggie Costello Wachs (https://www.filamentgroup.com)
*
* Copyright (c) 2008 Filament Group
* Licensed under GPL (https://www.opensource.org/licenses/gpl-license.php)
*
* Description: Compares the heights or widths of the top-level children of a provided element
and sets their min-height to the tallest height (or width to widest width). Sets in em units
by default if pxToEm() method is available.
* Dependencies: jQuery library, pxToEm method (article:
https://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
* Usage Example: $(element).equalHeights();
Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
* Version: 2.0, 08.01.2008
--------------------------------------------------------------------*/
$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
});
if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
$(this).children().css({'min-height': currentTallest});
});
return this;
};
4 – After you see the <script src="https://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2" type="text/javascript"></script>, paste the following: <script type="text/js" src="https://www.refernet.lu/wp-includes/js/plugin.js></script>
5 – Directly after that piece of code (or in the footer.php file… really, just anywhere other than above where you included plugin.js), insert the following:
<script type="text/js">$('#bd').equalHeights();</script>
That should fix everything, and hopefully it does! Let me know if you have any questions or can’t get it to work! I tried to be thorough…
