Achieving facebook alike image cover - html

Question

I am trying to achieve facebook alike image cover as follow, but unable to achieve desire effect. This is the css that i have try. As you all can see, the div content does not position correctly.
.profile {
position: relative;
}
.profile-cover img{
width: 100%;
}
.profile-photo {
position: absolute;
left: 20px;
bottom: -60px;
}
.profile-info {
padding-right: 120px;
}
<div class="profile">
<div class="profile-cover">
<img src="http://dummyimage.com/1200x300/000/fff" />
</div>
<div class="profile-details">
<div class="profile-photo">
<img src="http://dummyimage.com/100x100/eee/000" />
</div>
<div class="profile-info">
Profile info here
</div>
</div>
</div>
<div>
Remaining content here
</div>

Answer 1

I am not exactly sure if you wanted this because you just say the "the div content does not position correctly", but I'm quiet sure it's that.
So, if not, tell me.
Using the absolute positioning gets out of the flow the element. So, the next ones continues as if this element didn't exist. That's why the others were showing under this absolute element.
For next time, please precise which DIV by using its id, a class name or anything that we can know for sure the one you are talking about.
.profile {
position: relative;
}
.profile-cover img{
width: 100%;
}
.profile-photo {
display: inline-block;
margin-top: -60px;
margin-left: 20px;
}
.profile-info {
display: inline-block;
padding-right: 120px;
}
<div class="profile">
<div class="profile-cover">
<img src="http://dummyimage.com/1200x300/000/fff" />
</div>
<div class="profile-details">
<div class="profile-photo">
<img src="http://dummyimage.com/100x100/eee/000" />
</div>
<div class="profile-info">
Profile info here
</div>
</div>
</div>
<div>
Remaining content here
</div>

Answer 2

This is how I would do it ...
.profile {
margin-bottom: 15px;
}
.profile-cover img {
width: 100%;
}
.profile-photo {
display: inline-block;
margin-left: 20px;
margin-top: -24px;
}
.profile-info {
display: inline-block;
position: relative;
top: -25px;
left: 10px;
}
<div class="profile">
<div class="profile-cover">
<img src="http://dummyimage.com/1200x300/000/fff" />
</div>
<div class="profile-details">
<div class="profile-photo">
<img src="http://dummyimage.com/100x100/eee/000" />
</div>
<div class="profile-info">
Profile info here<br>
More info here
</div>
</div>
</div>
<div>
Remaining content here
</div>