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

LVL 3
Neil ThompsonSenior Systems DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mohan singhWeb developerCommented:
Please send screen shot of your page
0
Neil ThompsonSenior Systems DeveloperAuthor Commented:
Hi, this is what its coming out like on my page. The orange part is the whole container but the green area at the bottom is actually outside of the containing div, it should all be inside

ee.png
0
mohan singhWeb developerCommented:
you want the name section come between the message and the camera camera ?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Neil ThompsonSenior Systems DeveloperAuthor Commented:
The orange box I've drawn here should be the container, and it should contain the entire image, messages, photos and name

message and photos are overlays which should appear at the bottom of the image

name and age should be under the image but still within the main container

ee2.png
0
mohan singhWeb developerCommented:
it is correct or not[embed=file 1290567
the whole data inside of container
Untitled.png
0
Neil ThompsonSenior Systems DeveloperAuthor Commented:
all data inside the container like this

ee3.png
0
mohan singhWeb developerCommented:
Check it
<html>
<head>
<style>
 
.pictureAndTexDiv {
    border: blue 1px solid;
    width: 1%;
    display: table;
}
.cell {
    height: auto;
    overflow: hidden;
}
</style>

</head>
<body>
<div class="mainDiv">
  <div class="pictureAndTexDiv">
    <div class="cell"> <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" />

    <div >
        <h1 style='background-color:blue; float:left'>
     Hello 
    </h1>
     <h1 style='background-color:red; float:right'>
     Hello 
    </h1>
    </div>
<br />
<div >
<h1 style="background-color:yellow;text-align:center;">
 Your Name
</h1>
</div>
    
    </div>
  </div>
   
</div>
<p>&nbsp;</p>
<table width="1%" border="0" cellpadding="0" cellspacing="0">
  
  <tr>
     
  </tr>
</table>
</body>

</html>

Open in new window

0
Neil ThompsonSenior Systems DeveloperAuthor Commented:
Sorry, your code above gives this

screenshot.188.png
which is nothing like this which i asked for

ee2.png
0
rgranlundCommented:
Change your CSS for name:
.searchResultUser .name { 
	font-size: .8em;
	font-weight: bold;
	background:#000;
	color:#FFF;
	position:absolute;
   	left: 0px;
    right: 0px;
    top: 100%;
    padding: 5px;
}

Open in new window

Change  top: 100%; to  top: 80%; And see if it moves.  It is the the Top definition that is controlling its position.  If that does not work you may need to add a z-index:10; to it.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Neil ThompsonSenior Systems DeveloperAuthor Commented:
Thanks all

That didn't make a difference unfortunately but you put me in the right place. I've had another play and managed to get it , here is the code if it helps anyone in the future.

It was over-styled :(

Neil


.searchResultUser .name {
      font-size: .8em;
      font-weight: bold;
      background:#000;
      color:#FFF;
    padding: 5px;
}
0
rgranlundCommented:
Glad to help
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.