Sibling divs match height in container

Question

I have three divs in a container: http://jsfiddle.net/fBe9y/

One div has a lot of content. How do I get the other two divs, with less content, to match the height of the longest div?

I tried adding height: 100% to all the divs, but it doesn't work because that would need a height on div.container, which I don't know before rendering.

score 23 · Accepted Answer · edited May 23 '17 at 12:01

23

I recommend using display: table-row; and display: table-cell; for this. In short, what you do is make a table layout, but using <div> tags, and then style them to behave like a table.

This is better than just using a table for semantic and accessibility reasons.

But generally speaking, CSS does not give you many ways to refer to an element's siblings this way. The <table> tag does, but then it confuses screen readers and things.

If you wanted more rows, you would have more .container <div>s, and then create another <div> wrapping them all, and give it display: table;.

So with the same HTML you had, this CSS does what you want:

.container
{
    display: table-row;
}

.tile
{
    display: table-cell;
    width: 100px;
    background: #eee;
    border: 1px solid black;
}

See Fiddle.

Of note: while display: table; et al. are widely supported, IE did not add support until version 8. If you plan on supporting this for IE 7 or lower, you'll be forced to use a more complicated approach, like @Hristo's.

edited May 23 '17 at 12:01

Community

1
1

answered Oct 03 '12 at 20:42

KRyan

7,308
2
40
68

1

I did it with display: table at container only. and it works as well. – Alireza Ahmadi Jan 22 '16 at 05:21
2

This answer is about 10 years old, and probably not the best solution anymore, now that flexbox is widely supported. Unless you need to support very old legacy browsers, I recommend using Twirlman's answer instead – Alex von Brandenfels Jan 08 '21 at 21:20
@AlexvonBrandenfels Agreed, flex is the better solution for... almost all layout issues, really, these days. Though I don’t know why Twirlman has applied `display: flex;` to the tiles, or `flex-wrap: wrap;` to anything. Neither of those is required to achieve the desired layout unless I’m missing something. – KRyan Jan 09 '21 at 18:40

score 20 · Answer 2 · answered Jun 24 '15 at 03:52

20

You can solve this using flexbox

.container{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.tile{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

answered Jun 24 '15 at 03:52

Twirlman

1,109
2
12
30

Please note that not all browsers interpret the spec of Flexbox the same way. I've had troubles with this, see my example here: http://stackoverflow.com/questions/34229644/microsoft-edge-flexbox-padding-behavior – chocolata Dec 12 '15 at 09:16

score 8 · Answer 3 · answered Nov 30 '18 at 05:09

HTML

<div id="container">
  <div id="div1">1</div>
  <div id="div2">2</div>
  <div id="div3">3</div>
</div>

CSS

#container {
  display: flex;
  align-items: stretch;
}

#div1 {
  display: flex;
}

#div2 {
  display: flex;
}

#div3 {
  display: flex;
}

this 'display: flex;' and 'align-items: stretch;' in the container should make all the children div same height, as long as it is of the desired height.

score 1 · Answer 4 · answered Oct 03 '12 at 20:43

This is a very common question. Take a look at this article... it has all the answers:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Now, here's a quick fiddle of putting that to use. Try clicking on any of the "Column #" text elements to remove them from the document... the columns will resize nicely :)

http://jsfiddle.net/UnsungHero97/qUT3d/9/

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

That's the old method, and it was awful. CSS has evolved and has better tools than that now. The JS removal thing is pretty neat. — KRyan, Oct 03 '12 at 20:46
are you sure your `display: table-row;` and `display: table-cell;` solution is cross-browser compatible? — Hristo, Oct 03 '12 at 20:48
[Can I Use](http://caniuse.com/#feat=css-table) suggests that it's very-widely supported, yes. IE 7 and earlier did not support it, if that's a concern; that's a good point and I'll add it to my answer. — KRyan, Oct 03 '12 at 20:51
very cool! thanks for pointing this out to me :) I'll start answering similar questions in the future by providing both solutions — Hristo, Oct 03 '12 at 20:59

Sibling divs match height in container

4 Answers4

HTML

CSS

Linked