« Back to Index

Ensure two columns match heights (rather than tweaking CSS for multiple browser’s rendering differences)

View original Gist on GitHub

Equal Columns.md

When I get a chance I’m going to rewrite the following module to return a function that can accept multiple columns and change the height a bit more efficiently (as well as specify the device dimensions it should be applied for). But for now, this proof of concept works perfectly…

define(function(){

    var doc = document;

    if (doc.documentElement.clientWidth >= 650) {
        var compare = doc.querySelector('.island.compare');
        var lending = doc.querySelector('.island.lending');
        var highest = Math.max(compare.clientHeight, lending.clientHeight);

        compare.style.height = highest + 'px';
        lending.style.height = highest + 'px';
    }

});