38

I have two child <div> elements inside of a parent container <div> as shown:

<div class="row">
    <div class="item">
        <p>Sup?</p>
    </div>
    <div class="item">
        <p>Sup?</p>
        <p>Wish that other guy was the same height as me</p>
    </div>
</div>

I tried the following CSS:

.item {
    background: rgba(0,0,0,0.1);
    display: inline-block;
}

.row {
    border: 1px solid red;
}

How can I get both children (div.item) to be the height of the tallest child?

jsFiddle: http://jsfiddle.net/7m4f7/

2

4 Answers 4

25

One solution is to change the display value from inline-block to table-cell for the descendant div.item elements:

.row {
    border: 1px solid red;
    display: table;
    border-spacing: 20px; /* For controlling spacing between cells... */
}
.item {
    background: rgba(0,0,0,0.1);
    display: table-cell;
}

Example

5
  • Careful, table-cell is a css3 and doesnt work in all browsers.
    – Cam
    May 16, 2013 at 18:40
  • 9
    Actually the table-cell value was introduced in the CSS 2.1 Specification
    – Yana
    May 16, 2013 at 18:42
  • 2
    Please add display: table and border-spacing: 20px 20px to .row in your fiddle, makes the columns more apparent, thank you! jsfiddle.net/audetwebdesign/7m4f7/5
    – Marc Audet
    May 16, 2013 at 18:56
  • 2
    and for those who wonder why this doesn't work for you. make sure you have not set a float rule. You can have float: none Because sometimes we use float to eliminate carriage return spaces with inline-block. Apr 22, 2015 at 4:10
  • Kudos to Jomar for that extra tip-- totally helped!
    – Ricebandit
    Apr 19, 2017 at 21:14
13

Another solution is to use flexbox: http://jsfiddle.net/7m4f7/4/

.item {
    background: rgba(0,0,0,0.1);
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.row {
    border: 1px solid red;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

However, support is limited (but getting better!) See http://caniuse.com/flexbox

Otherwise you need to use javascript to set the heights manually.

2
  • 2
    given it does work, suppose that I have a lot of child elements that were divided automatically into different lines when I used inline-block but now it all gets stuffed in one line. Is there a work around for that.
    – akxer
    Feb 3, 2016 at 22:39
  • @akabhirav, yes — use flex-wrap: wrap; flex-direction: row;
    – crishoj
    Oct 31, 2017 at 23:58
10

jquery version: FIDDLE

var maxheight = 0;

$('div div.y').each(function () {
    maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight); 
});

$('div div.y').height(maxheight);

EDIT: Just noticed you're not dealing with the height of <div>'s, but <p>'s

1

You can use grid:

<div style="display:grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
    <div class="item">
        <p>Sup?</p>
    </div>
    <div class="item">
        <p>Sup?</p>
        <p>Wish that other guy was the same height as me</p>
    </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.