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

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>