Equal column height on mulitiple div with css

Question

I know this is an old question, but still not able to get any workable css solution.

The boxes should grow in height to accommodate all the dynamic content. The box with the maximum height should set the height of all the other boxes, so that all get the same height.

Note:
1) It should work till IE-8. And there could be too many boxes so dont limit it to 2 or 3 boxes.
2) I tried padding-bottom, negative margin bottom and table cell method. Cant use flex box as it wont support to IE9.
3) Cant change the HTML structure.

HTML:

<ul>
  <li>
    <div class="tile">
    <div class="img"><img src="http://placehold.it/100x50">
    </div>
    <div class="name">
      Lorum Ipsum Lorum  
    </div>
   </div>
  </li>

  <li>
    <div class="tile">
    <div class="img"><img src="http://placehold.it/100x50">
    </div>
    <div class="name">
      Lorum Ipsum Lorum  Lorum Ipsum Lorum
    </div>
   </div>
  </li>

  <li>
    <div class="tile">
    <div class="img"><img src="http://placehold.it/100x50">
    </div>
    <div class="name">
      Lorum Ipsum Lorum  Lorum Ipsum Lorum
    </div>
   </div>
  </li>

  <li>
    <div class="tile">
    <div class="img"><img src="http://placehold.it/100x50">
    </div>
    <div class="name">
      Lorum Ipsum Lorum  
    </div>
   </div>
  </li>

  <li>
    <div class="tile">
    <div class="img"><img src="http://placehold.it/100x50">
    </div>
    <div class="name">
      Lorum Ipsum Lorum  
    </div>
   </div>
  </li>
</ul>

CSS:

ul{
  margin:0;
  padding:0;
  width:600px; 
  margin:0 auto;
  border:#999 solid 1px;
  border-bottom:none;
  border-right:none;
  overflow:hidden;
}
li{
  float:left;
  list-style:none;
  width:25%;
  padding:0;
  margin:0;
  box-sizing:border-box;
  border-right:#999 solid 1px;
  border-bottom:#999 solid 1px;
  text-align:center;
  padding:5px;
}

example: http://codepen.io/anon/pen/GFeoc

possible duplicate of [CSS - Equal Height Columns?](http://stackoverflow.com/questions/2114757/css-equal-height-columns) — Paulie_D, Oct 30 '14 at 19:48

score 1 · Answer 1 · answered Oct 30 '14 at 21:53

1

For a CSS solution, try replacing float:left with display:table-cell on your li selector and add display:table; table-layout:fixed to your ul selector.

Example

answered Oct 30 '14 at 21:53

Talmid

1,273
14
19

I need multiple rows next to each other. So it doesn't work for me – Praveen Oct 31 '14 at 06:23

score 1 · Answer 2 · answered Oct 30 '14 at 23:39

1

It's very simple, add this to your js file in CodePen and it will work:

$( document ).ready(function() {
    var heights = $("li").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $("li").height(maxHeight);
});

Check here http://codepen.io/anon/pen/IFmkq

answered Oct 30 '14 at 23:39

paulalexandru

9,218
7
66
94

1

I understand that, the problem is that you won't find one because it does not exist, or it does exist something but it doesn't work on all browsers. – paulalexandru Oct 31 '14 at 07:14

Schmalzy · Answer 3 · 2014-10-30T20:07:25.380

0

Some simple JavaScript (jQuery) will do the trick.

DEMO

equalHeight($('.tile'));

function equalHeight(group) {
  tallest = 0;
  group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
      tallest = thisHeight;
    }
  });
  group.height(tallest);
}

edited Oct 30 '14 at 20:07

answered Oct 30 '14 at 20:00

Schmalzy

17,044
7
46
47

Equal column height on mulitiple div with css

3 Answers3