bezwzględna pozycja wewnątrz zmiennej szerokości rodzica div - html, css, css3

Mam m div dziecko, które chcę być pozycjonowane jako bezwzględne w prawym górnym rogu.

Domyślnie jest po lewej stronie.

Nadrzędny div ma zmienną szerokość, biorąc szerokość obrazu wewnątrz div.

Przykład tutaj

Nie mogę użyć marginesu po lewej, ponieważ div nadrzędny ma zmienną szerokość.

Użycie calc nie powiodło się, ponieważ 100% ma szerokość strony.

HTML -

<div class="pic">
<div class="imgc">
<img src="/images/http://nvoids.in/dir/album_image/image_6642.jpeg" />
</div>
<div class="del">
<a href="#">X</a>
</div>
</div>

<div class="pic">
<div class="imgc">
<img src="/images/http://nvoids.in/dir/album_image/image_6638.jpeg" />
</div>
<div class="del">
<a href="#">X</a>
</div>
</div>

Kod CSS -

.imgc {
float:left
}

.del {
position:absolute;
float:right;
background-color:black;
color:white;
//display:none;
}
.del a {
color: white;
text-decoration:none;
}

.pic {
float:left;
}
.pic:hover .del {
margin-left: 10px;
display:block;
}

Odpowiedzi:

.del {
position:absolute;
right:0;
top:0;
}

.pic {
float:left;
position:relative;
}

https://jsfiddle.net/kacmn38b/2/