I have the following code that is spit out to a literal in a ASP.NET application. This puts an X in the top left corner of a 100px x 100px div. I've been trying to figure out how to get it on the top right corner, but if I fiddle with the "left" or any other style attribute, it ends up off my div all together. I'll have several of these divs in a row, with the ids of prdctimg_0, prdctimg_1, etc. I'm really not good at styles and am baffled at how to do this. Would someone be able to point me in the correct direction? Here is a snipped screen shot of what the images look like now: alt text

The X on the left, should show up on the right instead.

<span id='prdctimg_0' 
   style="width: 100px;  height: 100px; border: solid thin black; float: left; margin: 5px;">
 <span style='color: red; background-color: white; border: thin solid red; font-weight: bold; font-size: 18px; cursor: pointer; position: absolute;' onclick='RemoveImage(0)'>x</span>
 <a href='ProductImage.ashx?imageid=0' title='Full size image' rel='lightbox'>
 <img  src="ProductImage.ashx?imageid=0" style="width:98px; height: 98px;" /></a></span>

1 answer

o.k.w 2355
2
points

This solution is not the ideal, better for you to use CSS styling. Anyway, a quickfix will be setting a position: relative for the image container, and then set right: 0px for the "X".

Code:

<span id='prdctimg_0' 
   style="width: 100px;  height: 100px; border: solid thin black; float: left; margin: 5px; position: relative;">
 <span style='color: red; background-color: white; border: thin solid red; font-weight: bold; font-size: 18px; cursor: pointer; position: absolute; right: 0px;' onclick='RemoveImage(0)'>x</span>
 <a href='ProductImage.ashx?imageid=0' title='Full size image' rel='lightbox'>
 <img  src="ProductImage.ashx?imageid=0" style="width:98px; height: 98px;" /></a></span>
</span>
Answered over 7 years ago by o.k.w