I have 8 green boxes on my site, each containing an image and either 3 or 4 list items with text only. The issue I'm facing is that the boxes are not of equal height due to two reasons: (1) One box may have an extra list item pushing the rest down, or (2) even when the number of list items is the same in a row, the heights still differ.
The main goal is to make sure all boxes in a row have uniform height regardless of the content inside.
You can check out the demo site here.
Here's a screenshot of the top row of boxes with a blue box highlighting the discrepancies:
Issue 1: Boxes #1 and #2 have different heights due to an additional list item in box #2.
Issue 2: Boxes #1 and #3 contain similar text but their heights are slightly off.
Key requirements include:
- Having red text placed above the respective images, overlaying them.
- Aligning all list items vertically within the boxes.
Desired look with red text changed to green for better visibility:
Here is the HTML structure of a box:
<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 here's the associated CSS:
Green Box Styling:
.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 Text Styling:
.redbox{margin-top: -2%; margin-bottom:-5%; color:red; font-weight:bold;}
Title Line Styling:
.titlebox{margin-bottom:20%;}
List Item Styling:
.features li{
padding:25px 0;
width: 100%;
}
Container for List Items:
.features{
list-style-type: none;
background: #A1F997;
text-align: center;
color: #000000;
padding:40px 12%;
font-size: 32px;
font-family: Garamond;
}
If you'd like to see how it looks, visit the demo site here. Hoping to find a solution that works across IE7+. Thank you!