Placement of Close Button on DIV using CSS - css

Question

I am trying to set the position of a close button over a div and cant get it to the top right hand side. I have read many of the Stack articles relating to this but cant get this working.
Is anyone able to assist?
http://jsfiddle.net/grantfeldman/K4p6g/1
<div class="tag">
<a class="closeButton"></a>
Foo
</div>
div.tag
{
color: #EEE;
font-size: 15px;
font-family: Georgia, Times, serif;
display: inline-block;
border: 2px solid #324566;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-color: #283957;
padding: 8px;
margin: 5px;
}
.closeButton
{
display:block;
float:right;
width:27px;
height:27px;
background:url('http://cdn-sg1.pgimgs.com/images/pg/close-button.png') no-repeat center center;
}

Answer 1

Working Fiddle: http://jsfiddle.net/K4p6g/2/
Needed changes:
#divMyTags div.existingTag
{
position: relative;
}
.closeButton
{
display:block;
position:absolute;
top:-10px;
right:-10px;
}
This absolutely positions the close button relative to its parent.
Quick update for another requirement in your comment:
http://jsfiddle.net/K4p6g/5/
Note that it's a quick update using jQuery, but it should give you the idea. If you're already using jQuery in your project then you're good with this.

Answer 2

I just changed some things, have a look
#divMyTags div.existingTag
{
color: #EEE;
font-size: 15px;
font-family: Georgia, Times, serif;
display: inline-block;
border: 2px solid #324566;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-color: #283957;
**padding: 0px**;
margin: 5px;
}
**#divMyTags .theText
{
margin:10px;
}**
Updated sources here : http://jsfiddle.net/K4p6g/4/