I have a cell containing two images. I want one to be centered in the middle of the cell and the other in the top right corner, overlaying the centered image.
My goal is to achieve this layout
https://jsfiddle.net/5bL56a34/
without specifying the left margin, as the centered image may vary in size.
Here is the HTML code I currently have
<table border="1" bgcolor="black">
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
<tr>
<td>
<img src="http://i.imgur.com/zjp0GlD.png" class="centered">
<img src="http://i.imgur.com/AtDwhrk.png" class="topRight">
</td>
</tr>
</table>
and the CSS
.topRight
{
position:absolute;
left:495px;
}