CSS: floating over text

Question

I want to make a delete icon appear when you mark over the content(text). Now I have done this, but when it appears it moves the text in a ugly way.

See here: http://jsfiddle.net/AB4Ls/10/

How can I make it "float over" it, so it dont affect the text but still appears

Answer 1

You need to "absolutely" position the close button, rather than float it in the content.

Simple add this to your CSS:

.aL_Content{
    position: relative
}

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

And delete the float:right from .delButton.