CODEWITHSUNDEEP
htmlcss
Halil Ibrahim
Halil Ibrahim

Reputation: 1369

Set elements' height value to the max one in a line with pure CSS

I have 3 divs with display:inline-block style. I want to set their height value so that it matches the one with the highest value. I also want to set height values auto. I've tried to show visually what I want to get below. Is this possible with pure CSS?

-----    -----    -----          -----    -----    ----- 
|   |    |   |    |   |          |   |    |   |    |   | 
-----    |   |    |   |    ==>   |   |    |   |    |   |
         -----    |   |          |   |    |   |    |   |
                  -----          -----    -----    -----

Upvotes: 2

Views: 176

Answers (2)

Naftali
Naftali

Reputation: 146300

With CSS you can set the inner divs to be display: table-cell and the outer one to be display: table

Demo: http://jsfiddle.net/maniator/C2dNu/

HTML:

<div id='out'>
    <div class='red'></div>
    <div class='blue'></div>
    <div class='green'></div>
</div>

CSS:

.red { 
    background: red;
    height: 60px;
}
.blue { 
    background: blue;
    height: 160px; 
}
.green {
    background: green;
    height: 80px; 
}
#out {
    display: table;
    width: 500px;
}

#out > div {
    display: table-cell;
    width: 33%;
}

Upvotes: 4

Arda
Arda

Reputation: 6916

With JS, it can be done with Equalize.js. I don't know a pure CSS solution though.

Upvotes: -1

Related Questions