How to make div boxes same height as each other, while aligning list items within

Question

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).

I simply need all divs in a row to have the same height no matter the amount of list items or whatever.

The demo site is here .

This screenshot shows the top row of divs, with a blue box identifying the problems.

• Problem 1: Divs #1 and #2 differ in height because div #2 has an additional list item.

• Problem 2: Div #1 and #3 have virtually the same text, yet their divs are not the same height either (close but different).

Ideally I'd like:

1. The red text to be placed atop the image above it, overlaying it.
2. Have all list items with a div ALIGNED vertically with adjacent divs.

Here is what I'd like it to look like (red text changed to green for visibility:

Here is a div's HTML:

    <a href="http:adfadfafl">

             <div class="block personal fl">

                <!-- CONTENT -->
                <div class="content">
                    <p class="price">
    <p class="vignette" style="background-image:url(http://jasoncampbell.net46.net/public/2.jpg)"></p>
                    </p>

                </div>
                <!-- /CONTENT -->
                <!-- FEATURES -->
                <ul class="features">
                <li class="redbox">MAKE THIS OVER IMAGE</li>
                <li class="titlebox">ldfadfadf </li>
                <li>ad ffadfa dfad f</li>
                <li>adf adfad </li>
                  </ul>

            </div>

      </a>

and it's CSS:

Green Box

.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;*/
}

Red Line of Text:

.redbox{margin-top: -2%; margin-bottom:-5%; color:red; font-weight:bold;}

Top Line of Text

.titlebox{margin-bottom:20%;}

Bottom 2 Lines of Text

.features li{
    padding:25px 0;
    width: 100%;
}

and the container the holds the list items with the div:

.features{
    list-style-type: none;    
    background: #A1F997;
    text-align: center;
    color: #000000;
    padding:40px 12%;
    font-size: 32px;
    font-family: Garamond;
}

Once again you can view my demo site here . Ideally need solution that works for IE7+ .Thank you all!

Answer 1

if you look for lines of block of same height but different height allowed from a line to another , display:flex or a trick with inline-block and box-shadow or even with the use absolute pseudo-elements could do it :

inline-block:

 body>div { width:80%; margin:auto; overflow:hidden; text-align:center; } a { display:inline-block; vertical-align:top; margin:0 0.5em 0; width:25%; background:lightgreen; box-shadow: 0 50px 0 lightgreen , 0 100px lightgreen , 0 150px lightgreen ; border-top:1em solid white; padding:0.5em;} 

 <div> <a> <div> <p>line</p> <p>line</p> </div> </a> <a> <div> <p>line</p> </div> </a> <a> <div> <p>line</p> <p>line</p> <p>line</p> <p>line</p> </div> </a> <a> <div> <p>line</p> </div> </a> <a> <div> <p>line</p> <p>line</p> </div> </a> <a> <div> <p>line</p> </div> </a> <a> <div> <p>line</p> <p>line</p> <p>line</p> </div> </a> <a> <div> <p>line</p> </div> </a> <a> <div> <p>line</p> <p>line</p> <p>line</p> </div> </a> </div> 

or flex:

 body>div { display:flex; flex-wrap:wrap; width:80%; margin:auto; justify-content:center; } a { margin:0.5em 1%; width:27%; background:lightgreen; padding:0.5em;} 

 <div> <a> <div> <p>line</p> <p>line</p> </div> </a> <a> <div> <p>line</p> </div> </a> <a> <div> <p>line</p> <p>line</p> <p>line</p> <p>line</p> </div> </a> <a> <div> <p>line</p> </div> </a> <a> <div> <p>line</p> <p>line</p> </div> </a> <a> <div> <p>line</p> </div> </a> <a> <div> <p>line</p> <p>line</p> <p>line</p> </div> </a> <a> <div> <p>line</p> </div> </a> <a> <div> <p>line</p> <p>line</p> <p>line</p> </div> </a> </div> 

these would a possibility via CSS, if all boxes must have same height ( height of the tallest), then javascript will be needed