title: How to make div boxes same height as each other, while aligning list items within
body: <p>My site consists of 8 divs (green boxes) which contain an image and either 3 or 4 list items. Each list item contains text only. My problem is that the divs (boxes) are not the same height for 2 reasons:  (1)  One div may contain an additional list item which pushes the other items down... or (2) I have no idea, because even when all 3 green divs in a row have the same amount of list items, they're still not the same height (See bullet #2 below screenshot).</p>
  
  <p>I simply need all divs in a row to have the <strong>same height</strong> no matter the amount of list items or whatever.</p>
  
  <p>The demo site is <a href="http://jasoncampbell.net46.net/public/demo.html" rel="nofollow noreferrer">here</a>.</p>
  
  <p>This screenshot shows the top row of divs, with a blue box identifying the problems.</p>
  
  <p><img src="https://i.stack.imgur.com/uz4Ox.png" alt="problem"></p>
  
  <ul>
  <li><p><strong>Problem 1:</strong> Divs #1 and #2 differ in height because div #2 has an additional list
  item.</p></li>
  <li><p><strong>Problem 2:</strong> Div #1 and #3 have virtually the same text, yet their divs are
  not the same height either (close but different).</p></li>
  </ul>
  
  <p>Ideally I'd like:</p>
  
  <ol>
  <li>The red text to be placed atop the image above it, overlaying it.</li>
  <li>Have all list items with a div ALIGNED vertically with adjacent divs.</li>
  </ol>
  
  <p>Here is what I'd like it to look like (red text changed to green for visibility:</p>
  
  <p><img src="https://i.stack.imgur.com/XN0Ns.png" alt="solution"></p>
  
  <p>Here is a div's HTML:</p>
  
  <pre><code>    &lt;a href="http:adfadfafl"&gt;
  
               &lt;div class="block personal fl"&gt;
  
                  &lt;!-- CONTENT --&gt;
                  &lt;div class="content"&gt;
                      &lt;p class="price"&gt;
      &lt;p class="vignette" style="background-image:url(http://jasoncampbell.net46.net/public/2.jpg)"&gt;&lt;/p&gt;
                      &lt;/p&gt;
  
                  &lt;/div&gt;
                  &lt;!-- /CONTENT --&gt;
                  &lt;!-- FEATURES --&gt;
                  &lt;ul class="features"&gt;
                  &lt;li class="redbox"&gt;MAKE THIS OVER IMAGE&lt;/li&gt;
                  &lt;li class="titlebox"&gt;ldfadfadf &lt;/li&gt;
                  &lt;li&gt;ad ffadfa dfad f&lt;/li&gt;
                  &lt;li&gt;adf adfad &lt;/li&gt;
                    &lt;/ul&gt;
  
              &lt;/div&gt;
  
        &lt;/a&gt;
  </code></pre>
  
  <p>and it's CSS:</p>
  
  <p><strong>Green Box</strong></p>
  
  <pre><code>.block{
      width: 30%;    
      margin: 0 15px;
      margin-bottom: 30px;
      min-height: 700px;
      max-height: 700px;
      overflow: hidden;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;    
  /*    border: 1px solid red;*/
  }
  </code></pre>
  
  <p><strong>Red Line of Text:</strong></p>
  
  <pre><code>.redbox{margin-top: -2%; margin-bottom:-5%; color:red; font-weight:bold;}
  </code></pre>
  
  <p><strong>Top Line of Text</strong></p>
  
  <pre><code>.titlebox{margin-bottom:20%;}
  </code></pre>
  
  <p><strong>Bottom 2 Lines of Text</strong></p>
  
  <pre><code>.features li{
      padding:25px 0;
      width: 100%;
  }
  </code></pre>
  
  <p><strong>and the container the holds the list items with the div:</strong></p>
  
  <pre><code>.features{
      list-style-type: none;    
      background: #A1F997;
      text-align: center;
      color: #000000;
      padding:40px 12%;
      font-size: 32px;
      font-family: Garamond;
  }
  </code></pre>
  
  <p>Once again you can view my demo site <a href="http://jasoncampbell.net46.net/public/demo.html" rel="nofollow noreferrer">here</a>. Ideally need solution that works for IE7+ .Thank you all!</p>