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

Question

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?

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

It's hard to understand what you want. Try rephrasing it maybe. From what I could understand you have 3 divs and you want to set their `height` for the same value of the _tallest_ of them, using just CSS, is that it? — Joum, Aug 21 '13 at 13:14
You could do it if you knew which one would be the tallest... otherwise it would require the container to have a size and the inner elements to be 100%. — Sam Sussman, Aug 21 '13 at 13:19
possible duplicate of [How do I achieve equal height divs with HTML / CSS?](http://stackoverflow.com/questions/1056212/how-do-i-achieve-equal-height-divs-with-html-css) — Naftali, Aug 21 '13 at 13:22

score 4 · Accepted Answer · answered Aug 21 '13 at 13:20

4

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%;
}

answered Aug 21 '13 at 13:20

Naftali

144,921
39
244
303

+1 - You answered while I was still making a [fiddle](http://jsfiddle.net/nbZf2/). :D – insertusernamehere Aug 21 '13 at 13:21
Just I've tried and seen the result. But margin between div elements is ignored as I see. Is there any way to set margin between div elements with this style? – Halil Ibrahim Aug 21 '13 at 13:24
2

You can't use `margin` as table cells have no concept of margins. You can use `border-spacing` on the parent element to achieve a "margin" between the cells. – insertusernamehere Aug 21 '13 at 13:25
1

@HalilIbrahim you can acheive it with a border: http://jsfiddle.net/maniator/C2dNu/1/ – Naftali Aug 21 '13 at 13:26
No problem @HalilIbrahim ^_^ – Naftali Aug 21 '13 at 13:28
A border is also a nice solution, but works only if the gap between the cells doesn't have to be transparent. – insertusernamehere Aug 21 '13 at 13:29
@insertusernamehere actually thats the problem accours right now :) is there any solution about it? – Halil Ibrahim Aug 21 '13 at 13:32
1

Fancy orange @insertusernamehere :-P – Naftali Aug 21 '13 at 13:33
@insertusernamehere sorry i missed that comment, thanks for the solution. – Halil Ibrahim Aug 21 '13 at 13:34
So, is it possible to break line when number of elements reaches a specific number in the line? – Halil Ibrahim Aug 21 '13 at 13:55
@HalilIbrahim No. You have to insert a new element that acts as a `table-row`. – insertusernamehere Aug 21 '13 at 14:00

score -1 · Answer 2 · answered Aug 21 '13 at 13:13

-1

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

answered Aug 21 '13 at 13:13

Arda

6,756
3
47
67

Thanks for the answer, but i wonder if it's possbile with pure css. If not i then should use this library – Halil Ibrahim Aug 21 '13 at 13:15
@Neal "Pure CSS", totally missed that. Thanks. – Arda Aug 21 '13 at 13:15
1

I guess it's because, even the question ist tagged [tag:javascript] the OP is looking for a CSS only solution. – insertusernamehere Aug 21 '13 at 13:16
1

@insertusernamehere Indeed, I was following tags :) – Arda Aug 21 '13 at 13:17
@Arda i haven't downvoted but, it's the same when someone ask's a javascript question and everyone answers in jQuery. They are all guaranteed a downvote from me. You should only answer the question with the languages that are included in tags. – iConnor Aug 21 '13 at 13:27
But yeah **+1** becuase the Javascript tag was removed – iConnor Aug 21 '13 at 13:29

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

2 Answers2