A div height matching issue

Question

I wrote some javascript to match the height of two columns and it is not working. I wanted to keep it as simple as possible but I don't understand exactly what the problem is. I am attaching the snippet of javascript as well as a link to the jsfiddle. Please let me know if you see anything wrong with my code.

function matchColumHeights('.column1', '.column2') {

    var column1Height = $('.column1').height();
    var column2Height = $('.column2').height();

    if (column1Height < column2Height) {
        $('.column1').height(column2Height);
    } else {
        $('.column2').height(column1Height);
    }
}

http://jsfiddle.net/hqypw5q2/1/

Answer 1

• you haven't included the jQuery library (so you have a reference error with the $ symbol)
• you don't call the function matchColumHeights (and your code is not executed)
• A .column2 element is missing (so the comparison don't work as you expect)

As a side note you have also a typo in your css ( loat instead of float ) and your parent should be wider than 700px (since you've applied some margin and padding to your columns)

See this example: http://jsfiddle.net/0e2vLyvb/2/