Browser Compatibility - Responsive programming quick tip

javascript to vertically align buttons to the bottom of variable length content columns

Earlier this week, I was working on a site that needed to have buttons positioned in the same visual row with variable length content above it.  The site was built responsively, and no matter what I did I could not get the buttons to line up.     Surprisingly, the stubborn browser was Firefox, which is the main browser I use in development work. 


When I found the fix for the problem,  I checked in other browsers (specifically Chrome and Safari), and lo and behold the buttons were already aligning.  Moral of this story: When you are having an issue with alignment, check other browsers to fully identify if the problem is browser specific or a programming issue.

Here is the code I used to ensure that all browsers displayed the same:

function updateMaxHeight() {
jQuery('.size-me').height('auto') boxes = jQuery('.size-me');
maxHeight = Math.max.apply( Math, { return jQuery(this).height(); }).get());
jQuery('.span12 .size-me').height(maxHeight + 5); }
jQuery( window ).load(updateMaxHeight);
jQuery(window).on("resize", updateMaxHeight);

I hope this helps someone else when they are programming a row of buttons below content that needs to be defined!