абсолютна позиция право в променлива ширина родител div - html, css, css3

Аз съм с дете div, което искам да се позиционира като абсолютно да бъде в десния горен ъгъл.

По подразбиране е вляво.

Родителният div има променлива ширина, като ширината на изображението се намира вътре в div.

Примерът тук

Не мога да използвам марж-ляво, тъй като родителският div има променлива ширина.

Също така използването на calc не успя, тъй като 100% в него е като ширината на страницата.

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>

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;
}

Отговори:

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

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

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