CODEWITHSUNDEEP
csshtml
Grant
Grant

Reputation: 11356

Placement of Close Button on DIV using CSS

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;
}

Upvotes: 0

Views: 13534

Answers (2)

Arbel
Arbel

Reputation: 30989

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.

Upvotes: 4

Cana
Cana

Reputation: 2204

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/

Upvotes: 1

Related Questions