CSS Hover List doesn't work - html

Question

I have created a list of html lists which has an image and a text on the right.
I was trying to put a border on the top and bottom of each item list. And I also did try to remove the border at the top for the first child and the border bottom on the last child to make it equal.
Then I added a hover effect that will hover on each list and whenever active. However for some reason this is not working and the padding and border for each item is all mess up.
Tried my best to play around my boxes but still having a hard time fixing it.
Here's my CSS:
body{
color: #fff;
}
ul li {
list-style: none;
display: block;
clear: both;
}
.puff-list {
background-color: #34495e;
width: 260px;
float: left;
}
.puff-list .puffs h2{
text-align: center;
border-bottom: 1px solid #57789a;
padding: 20px 30px 35px 20px;
font-size: 23px;
font-weight: 400;
}
.puff-list .fa-puffs {
position: relative;
left: -25px;
color: #34495e;
}
.puff-list ul {
/*padding: 20px 40px;*/
padding: 0;
}
.puff-list ul li {
display: block;
list-style: none;
border-bottom: 1px solid #57789a;
padding-left: 39px;
padding-top: 15px;
}
.puff-list ul li:first-child{
border-top: none;
}
.puff-list ul li:last-child{
border-bottom: 1px solid #57789a;
}
.puff-list ul li:hover{
background-color: #5b7b9b;
cursor: pointer;
}
.puff-list .puff-details {
float: left;
margin-top: 8px;
}
.puff-list img {
margin-right: 5px;
float: left;
}
.puff-list .puff-details {
padding-left: 8px;
}
.puff-list .status {
color: #658aaf;
}
You can view the whole HTML and CSS playground on JSFIDDLE: https://jsfiddle.net/9b6w9L6m/
Any idea how can I fix this?

Answer 1

First you need to fix some things.
You have a float: left on your .puff-details which isn't needed, since you aren't floating any other elements on that line, so remove that.
The elements inside .puff-details are floated, which makes the "float outside" the element. Therefor you need to add the clearfix solution to make .puff-details expand:
.puff-list .puff-details {
/*float: left; < remove this line */
margin-top: 8px;
}
.puff-list .puff-details:after {
content: " ";
display: block;
height: 0;
clear: both;
}
The border on the first and last item are already working.
Complete code:
body {
color: #fff;
}
ul li {
list-style: none;
display: block;
clear: both;
}
.puff-list {
background-color: #34495e;
width: 260px;
float: left;
}
.puff-list .puffs h2 {
text-align: center;
border-bottom: 1px solid #57789a;
padding: 20px 30px 35px 20px;
font-size: 23px;
font-weight: 400;
}
.puff-list .fa-puffs {
position: relative;
left: -25px;
color: #34495e;
}
.puff-list ul {
/*padding: 20px 40px;*/
padding: 0;
}
.puff-list ul li {
display: block;
list-style: none;
border-bottom: 1px solid #57789a;
padding-left: 39px;
padding-top: 15px;
}
.puff-list ul li:first-of-type {
border-top: none;
}
.puff-list ul li:last-child {
border-bottom: 1px solid #57789a;
}
.puff-list ul li:hover {
background-color: #5b7b9b;
cursor: pointer;
}
.puff-list .puff-details {
/*float: left;*/
margin-top: 8px;
}
.puff-list .puff-details:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.puff-list img {
margin-right: 5px;
float: left;
}
.puff-list .puff-details {
padding-left: 8px;
}
.puff-list .status {
color: #658aaf;
}
<aside class="puff-list" id="puff-list">
<div class="puffs">
<h2> <i class="fa fa-address-book-o"></i> Check List</h2>
</div>
<ul>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Food</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Russian</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Honey</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Mox</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Party</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Event</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Rrose</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">test</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="https://i.imgur.com/3I9Odgf.jpg" />
<div class="puff-details">
<div class="puff-name">Manga</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
</ul>
</aside>

Answer 2

You must add pseudo class for li like this
body{
color: #fff;
}
ul li {
list-style: none;
display: block;
clear: both;
}
.puff-list {
background-color: #34495e;
width: 260px;
float: left;
}
.puff-list .puffs h2{
text-align: center;
border-bottom: 1px solid #57789a;
padding: 20px 30px 35px 20px;
font-size: 23px;
font-weight: 400;
}
.puff-list .fa-puffs {
position: relative;
left: -25px;
color: #34495e;
}
.puff-list ul {
/*padding: 20px 40px;*/
padding: 0;
}
.puff-list ul li {
display: block;
list-style: none;
border-bottom: 1px solid #57789a;
padding-left: 39px;
padding-top: 15px;
}
.puff-list ul li:first-child{
border-top: none;
}
.puff-list ul li:last-child{
border-bottom: 1px solid #57789a;
}
.puff-list ul li:hover{
background-color: #5b7b9b;
cursor: pointer;
}
.puff-list ul li::after {
display: block;
content: "";
clear: both;
}
.puff-list .puff-details {
float: left;
margin-top: 8px;
}
.puff-list img {
margin-right: 5px;
float: left;
}
.puff-list .puff-details {
padding-left: 8px;
}
.puff-list .status {
color: #658aaf;
}
<aside class="puff-list" id="puff-list">
<div class="puffs">
<h2> <i class="fa fa-address-book-o"></i> Check List</h2>
</div>
<ul>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Food</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Russian</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Honey</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Mox</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Party</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Event</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Rrose</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">test</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
<li>
<img src="http://lorempixel.com/40/20" />
<div class="puff-details">
<div class="puff-name">Manga</div>
<div class="status">
<i class="fa fa-circle online"></i> online
</div>
</div>
</li>
</ul>
</aside>

Answer 3

Have you tried adding and removing border on the first and last child?
.puff-list ul li {
display: block;
list-style: none;
border-bottom: 1px solid #57789a;
padding-left: 39px;
padding-top: 15px;
}
.puff-list ul li:first-child{
border-top: none;
}
.puff-list ul li:last-child{
border-bottom: 1px solid #57789a;
}
And also try using shorthand padding instead of dividing them.