student student - 4 years ago 172
HTML Question

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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download