CODEWITHSUNDEEP
htmlcss
Kamlesh
Kamlesh

Reputation: 609

how to set outside small 8 box for resize with border?

I made one box and 8 side small boxes for resize . simply displaying these 8 small boxes at the border of main box .see this : http://jsfiddle.net/kamlesh0606/jrQ7A/1/

but when I added border to the main box, these 8 small boxes appear inside the main box .. see this : http://jsfiddle.net/kamlesh0606/cSvXP/

so help me so as how to place these 8 small boxes outside the main box with border?

Thanks

Upvotes: 0

Views: 191

Answers (2)

Uttara
Uttara

Reputation: 2534

well to acheive what you want I have added a div outside your main box (#label1) whose id is #borderbox

and change your css as below

#borderbox{
   position: relative; 
    top: 42px; 
    left: 105px; 
    width: 60px; 
    height: 60px; 
    background-color:rgb(165, 165, 165);
    padding:10px;
}

#label1{
    width: 100%; 
    height: 100%; 
    background: none repeat scroll 0px 0px rgb(170, 175, 255);
}

now what you are describing your problem is you want to increase the border width as of now you can increase the padding of #borderbox that will appear as the border to the main box

here is a working demo

Upvotes: 2

Ankit
Ankit

Reputation: 502

I Guess this is wat you are looking for

http://jsfiddle.net/kamlesh0606/jrQ7A/1/

<div style="position: relative; top: 42px; left: 105px; width: 60px; height: 60px; border: 10px solid rgb(165, 165, 165); background: none repeat scroll 0px 0px rgb(170, 175, 255);" id="label1" class="drag">

Upvotes: 0

Related Questions