Let Two Divs Have The Same Height

I have two divs like that:

ABC

ABC DEF GHI JKL MNO

#div1 { width: 50px; background-color: red; float:

Solution 1:

Demo

the simplest solution is to wrapper both the divs in a div and make it display flex;

html

<divclass="wrapper"><divid="div1">ABC</div><divid="div2">ABC DEF GHI JKL MNO</div></div>

css

.wrapper {
    display: flex;
}

Solution 2:

With this your two div will get the same height (height of the biggest Div)

(This code use JQuery)

$( document ).ready(function() {
    var s1 = $('#div1').height();
    var s2 = $('#div2').height();

    if (s1 > s2)
        $('#div2').css('height', s1 + "px");
    else
        $('#div1').css('height', s2 + "px");
});

Solution 3:

With jquery you could do something like this:

var tallness = $("#div2").height();
$("#div1").height(tallness);

JSFIDDLE

Solution 4:

If you mind old browser or oldish solid way to do this you can look at http://alistapart.com/article/fauxcolumns a classic that is now reliable for ages :) and fits to your needs since width of element is set.

A very old template still acurate using this method with a 3 col layout : http://www.pixy.cz/blogg/clanky/css-3col-layout/ (no flex nor table nor js there ;) )