Put an X on the topright of a div without making the top clickable

Question

I have a rect and have an X on the top right with items inside of it. The div with the X is clickable. The problem is the whole top area is clickable and not just the topright (the 'X') as i wanted. How do i make only the X clickable and still align to the right?

my css is

.itembox 
{
    float:left;
}

.itembox .RemoveMediaNotif
{
    text-align: right;
    text-decoration:underline;
    cursor: pointer;
}

my html is

<div class="itembox" id="i16"><div class="RemoveMediaNotif">X</div><div ...

Answer 1

Your outer div has to float left ? Otherwise I'd go (untested ) :

<div class='outer'><div class='x'>X</div></div>

and

.outer {
   //
}
.x {
  float:right;
}

Answer 2

.itembox .RemoveMediaNotif
{
    float:right;
    text-decoration:underline;
    cursor: pointer;
}

Should fix your problem.

Answer 3

You could absolutely position it from the right. That's what I'd do (I'm assuming it's some sort of close button):

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

.itembox .RemoveMediaNotif 
{ 
    position: absolute;
    right: 0px;
    top: 0px; 
    text-decoration:underline; 
    cursor: pointer; 
}