How to align a picture to the bottom of another picture? - html

Question

How to align the raccoon picture so it appear at the right bottom of the big round picture? As it is at the image.
I tried background-position: bottom right; as well as position: absolute; but it doesn't work.
See the code below.
Thank You.
.p-i--1 {
background-image: url(http://www.zerohedge.com/sites/default/files/pictures/picture-3930.jpg);
}
.p-i {
border-radius: 50%;
background-position: bottom right;
width: 40px;
height: 40px;
position: absolute;
}
.p-1 {
float: left;
width: 220px;
height: 100%;
position: relative;
}
.p-wrap {
bottom: 0;
width: 100%;
text-align: center;
}
.pic-wrap {
width: 122px;
height: 122px;
margin: 0 auto;
}
.p_pic-1 {
background-image: url(http://www.fernomortuary.com/~/media/products-mortuary/swatches/Swatch_Burgundy.ashx?w=122);
background-position: center;
float: left;
width: 122px;
height: 122px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.p-description {
font-family: Roboto;
font-weight: 300;
color: #666;
font-size: 14px;
text-align: center;
float: left;
margin-top: 0;
}
.p-name {
text-align: center;
}
<div class="p-1">
<div class="p-i--1 p-i"></div>
<div class="pic-wrap">
<a class="p_pic-1" href="index.html"></a>
</div>
<div class="p_wrap">
<h4 class="p-name">Some text</h4>
<p class="p-description">Some very very very very long description</p>
</div>
</div>

Answer 1

Put the smaller picture within .pic-wrap. Give it an absolute position and align it using bottom and right properties:
JS Fiddle
CSS Changes made:
.pic-wrap {
position: relative;
}
.p-i {
position: absolute;
bottom: 0;
right: 0;
}
And if you want the white border around the small image:
.p-i {
border: 3px solid white;
}
JS Fiddle

Answer 2

Just add a bottom and right property to your absolute element like this:
.p-i {
border-radius: 50%;
background-position: bottom right;
width: 40px;
height: 40px;
position: absolute;
bottom: 100px;
right: 50px;
}
Here's a snippet with the above codes:
.p-i--1 {
background-image: url(http://www.zerohedge.com/sites/default/files/pictures/picture-3930.jpg);
}
.p-i {
border-radius: 50%;
background-position: bottom right;
width: 40px;
height: 40px;
position: absolute;
bottom: 100px;
right: 50px;
}
.p-1 {
float: left;
width: 220px;
height: 100%;
position: relative;
}
.p-wrap {
bottom: 0;
width: 100%;
text-align: center;
}
.pic-wrap {
width: 122px;
height: 122px;
margin: 0 auto;
}
.p_pic-1 {
background-image: url(http://www.fernomortuary.com/~/media/products-mortuary/swatches/Swatch_Burgundy.ashx?w=122);
background-position: center;
float: left;
width: 122px;
height: 122px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.p-description {
font-family: Roboto;
font-weight: 300;
color: #666;
font-size: 14px;
text-align: center;
float: left;
margin-top: 0;
}
.p-name {
text-align: center;
}
<div class="p-1">
<div class="p-i--1 p-i"></div>
<div class="pic-wrap">
<a class="p_pic-1" href="index.html"></a>
</div>
<div class="p_wrap">
<h4 class="p-name">Some text</h4>
<p class="p-description">Some very very very very long description</p>
</div>
</div>

Answer 3

Here is a fiddle: https://jsfiddle.net/6sxLj3hL/
Your hard coded height on the container wasn't necessary so I removed it.
.p-i--1 {
background-image: url(http://www.zerohedge.com/sites/default/files/pictures/picture-3930.jpg);
}
.p-i {
border-radius: 50%;
background-position: bottom right;
width: 40px;
height: 40px;
float:right
}
.p-1 {
float: left;
width: 220px;
height: 100%;
position: relative;
}
.p-wrap {
bottom: 0;
width: 100%;
text-align: center;
}
.pic-wrap {
width: 122px;
margin: 0 auto;
overflow: auto;
}
.p_pic-1 {
background-image: url(http://www.fernomortuary.com/~/media/products-mortuary/swatches/Swatch_Burgundy.ashx?w=122);
background-position: center;
width: 122px;
height: 122px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: block;
overflow: auto;
}
.p-description {
font-family: Roboto;
font-weight: 300;
color: #666;
font-size: 14px;
text-align: center;
float: left;
margin-top: 0;
}
.p-name {
text-align: center;
}
I rearranged your HTML a bit
<div class="p-1">
<div class="pic-wrap">
<a class="p_pic-1" href="index.html"></a>
<div class="p-i--1 p-i"></div>
</div>
<div class="p_wrap">
<h4 class="p-name">Some text</h4>
<p class="p-description">
Some very very very very long description
</p>
</div>
</div>