I'm still facing challenges with my lists...
After receiving some assistance, I was able to create a horizontal list with perfect dimensions for my needs: each element taking up 33.33% width and adjusting its height based on the tallest element. I achieved this by combining regular list items with properties from table and table-cell.
Now, my next task is to wrap the content of each <li> element in an <a> tag to make the entire <li> a clickable link. However, I am finding it challenging as the links do not fill the entire <li> according to the tallest one.
Please take a look at the Fiddle for reference: http://jsfiddle.net/paelzersebbi/mJm6p/4/
The red section needs to span the full height of each <li> element. I cannot use fixed dimensions since it needs to be responsive. Additionally, I require the <div class="one"> container as it is intended to have a background image.
HTML
<ul>
<li><a href="">
<div class="one">
<div class="caption"><h4>Caption 1</h4></div>
</div>
<div class="two">
Here is some text.
</div>
</a>
</li>
<li><a href="">
<div class="one">
<div class="caption"><h4>Caption 2</h4></div>
</div>
<div class="two">
More text here.<br />
And more content.
</div>
</a>
</li>
<li><a href="">
<div class="one">
<div class="caption"><h4>Caption 3</h4></div>
</div>
<div class="two">
Additional text here.<br />
Even more content.<br />
And then some.
</div>
</a>
</li>
</ul>
CSS
ul {
list-style: none;
display: table;
border-collapse: separate;
border-spacing: 30px 0;
width: calc(80% + 60px);
margin: 0 -30px;
padding: 0;
}
li {
display: table-cell;
width: 33.33333%;
background-color: #FFF;
vertical-align: top;
padding: 10px;
position: relative;
}
a {
display: block;
background: red;
}
a:hover {
background: #CCC;
}
.one {
height: 100px;
background-color: #C92;
position: relative;
}
.caption {
position: absolute;
bottom: 0;
}
h4 {
margin:0;
padding:5px;
}
.two {
padding:5px;
}
Thank you for your assistance, I truly appreciate it!