CODEWITHSUNDEEP
htmlcsscss-position
Mr.X
Mr.X

Reputation: 31285

Place a div along border edge of div

In my web application, I wanted to place a small div along border edge of another div like this:

Div along the border of another div

This is my code:

<div style="border:1px solid black; height:1em; width:10em;">
<div style="border:1px solid black; display:inline-block; height:10em; 
width:10em;"> Along edge </div>
 </div>

How can it be done?

Upvotes: 2

Views: 4625

Answers (4)

Jack Hanna
Jack Hanna

Reputation: 167

Nest the smaller div inside the main div.

.along-edge {
position: absolute;
margin-top: -10px;
z-index: 1;
}

Upvotes: 1

ketan
ketan

Reputation: 19341

Following way you can do it. Make main div position:relative and along edge div position:absolute to main div. And give top and right to sub div.

.main{
    border:2px solid;
    position:relative;
    width:400px;
    height:150px;
    top:50px;
}
.sub{
    border:1px solid;
    position:absolute;
    right:10px;
    top:-10px;
    z-index:99;
    background-color: #fff;
}
<div class="main">
    Main Div
    <div class="sub">
        along edge
    </div>
</div>

Hope it helps.

Upvotes: 3

Karthik N
Karthik N

Reputation: 535

put css like this

.main-div
{
 position:relative;
}
.along-edge
{
 position:absolute;
 right:50px;
 top:-20px;
 z-index:1;
}

Check this fiddle

Upvotes: 2

AmmarCSE
AmmarCSE

Reputation: 30597

<div id="Main">
    <div id="Edge"></div>
</div>

and css

#Main{
    width:200px;
    height:200px;
    border:solid 1px black;
    position:relative;
    margin-top:50px;
}
#Edge{
    width:50px;
    height:50px;
    border:solid 1px black;
    position:absolute;
    top:-25px;
    right: 50px;
}

demo

Upvotes: 1

Related Questions