title: How Do I Align Divs With Different Heights?
body: <p>I'm having trouble aligning my divs. My divs have no set height so they take the height of how much text is inside. </p>
  
  <p>Here is a photo of what it looks like now.</p>
  
  <p><a href="https://i.stack.imgur.com/Igmfk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Igmfk.png" alt="enter image description here"></a></p>
  
  <p>Notice the prince post is aligned right and under that post is another post aligned under it. I can't seem to figure out what's going wrong in this.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div class="row" style="padding:30px 10px 30px 20px; margin:auto;  display:block;"&gt;
  
   &lt;div class="large-12 column large-columnz"&gt;
   &lt;a href="post url"&gt;&lt;img src=""&gt;&lt;/a&gt;
   &lt;div class="row column"&gt;The Title
   Article Excerpt&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the css:</p>
  
  <pre><code>.large-columnz {  
      max-width:560px;
      margin-bottom:10px;
      display: inline-block;
      vertical-align: top;
      *display: inline;
   }
  </code></pre>
  
  <p>I am using the <a href="http://foundation.zurb.com/sites/docs/v/5.5.3/css.html" rel="nofollow noreferrer">Foundation</a> responsive framework to design my site as well as my own incorporated css. </p>
  
  <p>Can anyone tell me what I am doing wrong which causes the last two post to not align.</p>