To view the codepen for reference, please click on the following link: http://codepen.io/rezasan/pen/apvMOR
I am attempting to align all the content within the columns (Date, Title, and Button, including the separator) vertically. I have tried using display table but it did not work as expected. Seeking assistance from the experts in this community.
Here is the HTML code snippet:
<ul class="ir_home_news">
<li class="si_fixed">
<div class="ir_home_newsDate">18 November 2016</div>
<div class="ir_home_newsTitle">Disclosure Of Interest</div>
<div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div>
</li>
<li class="si_fixed">
<div class="ir_home_newsDate">18 November 2016</div>
<div class="ir_home_newsTitle">Disclosure Of Interest</div>
<div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div>
</li>
<li class="si_fixed">
<div class="ir_home_newsDate">18 November 2016</div>
<div class="ir_home_newsTitle">Disclosure Of Interest</div>
<div class="ir_home_button"><a href=""><button>VIEW DETAILS</button></a></div>
</li>
</ul>
Below is the CSS styling applied:
ul, li {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.ir_home_news li {
border-top: 1px solid #ebebeb;
padding: 10px;
}
.ir_home_news li:nth-child(even){
background-color: #f8f8f8;
}
.ir_home_news li::after {
content: "";
clear: both;
display: table;
}
.ir_home_news li div {
display: table-cell;
vertical-align: middle;
padding: 0px 15px;
border-right: 1px solid red;
}
.ir_home_news li div:last-child{
border-right: none;
}
.ir_home_newsDate {
float: left;
width: 18%;
margin-bottom: 10px;
font-size: 18px;
color:#003087;
}
.ir_home_newsTitle {
float: left;
width: 65%;
font-size: 17px;
color:#003087;
}
.ir_home_button {
float: left;
width: 10%;
}
.ir_home_button button {
background-color: #003087;
color: #fff;
padding: 15px 25px;
border-radius: 0;
font-size: 13px;
}
Hope these snippets help in understanding the structure of the code!