How to force inline-blocked divs to same height

Question

i have inline-blocked divs like a grid. i would like to force all of them which are in the same line to the same height, they should get the height of the longest div.

Css, jquery or simple javascript solution would be great.

It is something very common nowadays... i went to have a look at Masonry but as far as i understood on the sample graphics, it does not align like this... am i right ?

The blog in question : http://ildesign-blogger-demo-1.blogspot.fr/

The HTML :

<div class="container>
    <div class="inline">text</div>
    <div class="inline">text + image</div>
    <div class="inline">text</div>
    <div class="inline">whatever</div>
    <div class="inline">text + image</div>
    <div class="inline">text</div>
</div> 

The CSS :

.container {width: 100%; display:block;} 
.inline {display: inline-block; width: 28%; margin: 1%; padding: 1%;}

So, there are three inline divs in each line, i would like the lines beeing aligned, so the inline divs should have the same height like the longest div in the line...

Edit : I re-edited this post to add that the html is generated by a Blogger xml template. So, if you suggest to add each three inline divs into a div which will be like a row, i do not know how to do it... the original xml code :

<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <div class='date-outer'>
      <h2 class='date-header'><span><data:post.timestamp/></span></h2>
      <div class='date-posts'>
        <div class='post-outer'>
          <b:include data='post' name='post'/>
          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <b:include data='post' name='comments'/>
          </b:if>
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <b:include data='post' name='comments'/>
          </b:if>
        </div>
        <b:if cond='data:post.includeAd'>
          <b:if cond='data:post.isFirstPost'>
            <data:defaultAdEnd/>
          <b:else/>
            <data:adEnd/>
          </b:if>
          <div class='inline-ad'><data:adCode/></div>
          <data:adStart/>
        </b:if>
        <b:if cond='data:post.trackLatency'>
          <data:post.latencyJs/>
        </b:if>
      </div>
    </div>
  </b:loop>
<data:adEnd/>
</div>

So the .blog-posts = .container and the .date-outer = .inline in my above html example...

Masonry can do it ? Or a jquery code for making a grid with equal heights ?

Answer 1

I was looking for a jquery plugin which makes the divs in equal height of the height of the tallest div. There are a lot on the web but not all of them work. I have found one which works perfectly : https://github.com/johnnyfaldo/equal-heights-responsive

It needs four .js files :

• jquery.js
• underscore.js
• html5shiv.js
• equal-heights-responsive.js

To initiate the plugin :

<script type="text/javascript">
    $(document).ready(function() {
        $('.elements-to-equalise').equalHeights({
            responsive:true,
            animate:true,
            animateSpeed:500
        });
    });
</script> 

Answer 2

display: inline-block style is designed for something else, here's an example of what it's been designed for (inline is a separate dispay mode, so I'd recommend to rename you class to inline-block regardless of which way you're gonna proceed with - for now I used your namings):

Create this with 100 cells:

<div class='block'>
    <div class="inline" style='width: 50px; height: 50px;'>1</div>
    <div class="inline" style='width: 50px; height: 50px;'>2</div>
    <div class="inline" style='width: 50px; height: 50px;'>3</div>
..
    <div class="inline" style='width: 50px; height: 50px;'>100</div>
</div> 

then resize the window and watch how boxes get layout.

What you need is a table, either a regular one:

<table>
 <tr>
  <td>
   <div>First Col Content</div>
  </td>
  <td>
   <div>Second Col Content</div>
  </td>
  <td>
   <div>Third Col Content</div>
  </td>
 </tr>
</table>

or a CSS one:

<div style='display: table;'>
 <div style='display: table-row;'>
  <div style='display: table-cell; width: 33%; min-width: 33%;'>
   <div>First Col Content</div>
  </div >
  <div style='display: table-cell; width: 33%; min-width: 33%;'>
   <div>Second Col Content</div>
  </div >
  <div style='display: table-cell; width: 34%; min-width: 34%;'>
   <div>Third Col Content</div>
  </div>
 </div>
</div>

Answer 3

Very simple jQuery plugin which also includes automatically resizing elements when window size is changed.

Change .my-inline-block-class to a jQuery selector that will select your inline-block elements.

(function($, window) {
    var $ls;
    function autoheight() {
        var max = 0;
        $ls.each(function() {
            $t = $(this);
            $t.css('height','');
            max = Math.max(max, $t.height());
        });
        $ls.height(max);
    }
    $(function() {
        $ls = $('.my-inline-block-class'); // the inline-block selector
        autoheight(); // first time
        $ls.on('load', autoheight); // when images in content finish loading
        $(window).load(autoheight); // when all content finishes loading
        $(window).resize(autoheight); // when the window size changes
    });
})(jQuery, window);