CODEWITHSUNDEEP
css
Salvador Dali
Salvador Dali

Reputation: 222501

Putting close button on the right side of the parent div

I am trying to have a close button on the right side of the div but a little bit higher than the div. Something like on the following picture:

enter image description here

After searching for a little bit I found the following relevant question here, I tried to modify it a little bit to get what I want.

My attempt can be viewed on the fiddle:

<div class="area">
    <span class="close">X</span>
    <div class="areaInside">some data</div>
</div>
.areaInside{
    border: 2px dashed #bbb;
    border-radius: 10px;
    color: #bbb;
    min-height: 80px;
}
.area{
    width:70%;
    height:100px;
}
.close{
    float:right;
    cursor: pointer;
    font-weight: bold;
}

But clearly it does not do what I wanted. I want the close button to be above the area and a little bit to the left. How can I achieve this without changing the markup (only with css).

Upvotes: 0

Views: 3628

Answers (6)

Rituraj ratan
Rituraj ratan

Reputation: 10378

See updated DEMO

Use Position concept make parent property relative and child property absolute now child css work relative to parent 

.areaInside{
    border: 2px dashed #bbb;
    -moz-border-radius: 10x;
    -webkit-border-radius: 10x;
    border-radius: 10px;
    color: #bbb;
    min-height: 80px;
    position:absolute;
    width: 100%;
}
.area{
    width:200px;
    height:100px;
    position:relative;
}
.close{
    float:right;
    cursor: pointer;
    font-weight: bold;
    position: absolute;
   right: 2px;
   top: -14px;
}

Upvotes: 1

Kawinesh S K
Kawinesh S K

Reputation: 3220

.close {
float: right;
cursor: pointer;
font-weight: bold;
display: block;
margin-top: -17px;
margin-right: 8px;
background: red;
}

Updated Fiddle

Upvotes: 1

Kiran
Kiran

Reputation: 20313

Try this:

.close {
float: right;
cursor: pointer;
font-weight: bold;
position: relative;
margin-top: -15px;
margin-right: 10px;
}

DEMO

Upvotes: 1

Richa
Richa

Reputation: 4270

You can use positions

Demo

.area{
    width:70%;
    height:100px;
    position:relative;
}
.close{
   position: absolute;
    right: 2px;
    top: -10px;
    cursor: pointer;
    font-weight: bold;
}

Upvotes: 1

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

Check your jsFiddle

position:relative;
margin-top:-15px;

Upvotes: 2

Praveen
Praveen

Reputation: 56501

You can make use of line-height in this case.

.close{
    float:right;
    cursor: pointer;
    font-weight: bold;
    line-height: 2px;
}

Fiddle

Upvotes: 1

Related Questions