Solved: css not keeping all the content in a container

Hi

I have the following code but I cannot get my name <div> to be within the searchResultsUser <div> (currently shown in orange to highlight the fact)

My CSS isn't brilliant so any re-structuring would be great, must all be responsive and scale down nicely please.

Regards
Neil

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<style>
.searchResultContainer{ display:flex; }
.searchResultContainer:last-child{ margin-right:0;}
.searchResultUser {
	width: 18%;
	background: #FFF;
	border: 1px solid #ff6600;
	position: relative;
	float: left;
	margin-top: 8px;
	margin-right: 8px;
	color: #333;
}
.searchResultUser .image img {
	width: 100%; 
	position: relative;
}
.searchResultUser img { display: block }

.searchResultUser .infoLeft {
	position:absolute;
    left: 0px;
    bottom: 0px;
    line-height: 1em;
    background: #000;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 5px;
	width:20%;
}
.searchResultUser .infoRight {
	position:absolute;
    bottom: 0px;
    right: 0px;
    line-height: 1em;
    background: #000;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 5px;
	width:20%;
	text-align:right;
}
.searchResultUser .verified {
	position:absolute;
    right: 0px;
    top: 0px;
    height: 1.2em;
    background: #009;
    color: #fff;
    overflow: hidden;
    padding: 0px 5px 7px 5px;
	font-size:0.8em;
}
.searchResultUser .name { 
	font-size: .8em;
	font-weight: bold;
	background:#000;
	color:#FFF;
	position:absolute;
   	left: 0px;
    right: 0px;
    top: 100%;
    padding: 5px;
}
</style>
<div class="searchResultContainer">
  <div class="searchResultUser">
    <div class="image"><img src="https://www.shutterbug.com/images/styles/600_wide/public/50mm_0.jpg"></div>
    <div class="verified">VERIFIED</div>
    <div class="infoLeft"><i class="fas fa-comments white"></i> 12</div>
    <div class="infoRight"><i class="fas fa-camera white"></i> 5</div>
    <div class="name">Jayne</div>
  </div>
  <div class="searchResultUser">
    <div class="image"><img src="https://www.shutterbug.com/images/styles/600_wide/public/50mm_0.jpg"></div>
    <div class="verified">VERIFIED</div>
    <div class="infoLeft"><i class="fas fa-comments white"></i> 12</div>
    <div class="infoRight"><i class="fas fa-camera white"></i> 5</div>
    <div class="name">MCWootie</div>
  </div>
  <div class="searchResultUser">
    <div class="image"><img src="https://www.shutterbug.com/images/styles/600_wide/public/50mm_0.jpg"></div>
    <div class="verified">VERIFIED</div>
    <div class="infoLeft"><i class="fas fa-comments white"></i> 12</div>
    <div class="infoRight"><i class="fas fa-camera white"></i> 5</div>
    <div class="name">Neil</div>
  </div>
</div>
</body>
</html>

Open in new window