Let two divs have the same height

Question

I have two divs like that:

<div id="div1">ABC</div>
<div id="div2">ABC DEF GHI JKL MNO</div>

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

#div2 {
    width: 50px;
    background-color: green;
    float: left;
}

And i'd like to make the height of div1 is the same height of div2.

How can i do? Thanks!

JSFIDDLE

No idea why this is down voted, the user explained his issue, provided a code, if there is any reason for your down vote than please comment after your vote — Mr. Alien, Aug 05 '14 at 18:23

score 4 · Accepted Answer · answered Aug 05 '14 at 18:20

4

Demo

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

html

<div class="wrapper">
    <div id="div1">ABC</div>
    <div id="div2">ABC DEF GHI JKL MNO</div>
</div>

css

.wrapper {
    display: flex;
}

answered Aug 05 '14 at 18:20

4dgaurav

11,360
4
32
59

Yes, you are the best. I prefer your solution to that solution which added a large padding-bottom and a negative margin-bottom. – Trong Lam Phan Aug 06 '14 at 09:14

score 2 · Answer 2 · answered Aug 05 '14 at 18:22

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");
});

score 2 · Answer 3 · answered Aug 05 '14 at 18:28

2

With jquery you could do something like this:

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

JSFIDDLE

answered Aug 05 '14 at 18:28

hbsaenz

21
1

score 0 · Answer 4 · answered Aug 05 '14 at 18:48

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 ;) )

Let two divs have the same height

4 Answers4

Linked