CODEWITHSUNDEEP
css
version 2
version 2

Reputation: 1059

Inner div should stay always inside outer div

I have a div (outer div; that's what I named it). It contains an aside now (like an inner div). I am trying to make this aside stay inside the outer div always.

Now let me give you a description about my aside:

1) It's draggable (Obviously) 2) Zoom in/Zoom out.

I am trying to make sure that the aside always stays inside the outer div even if we drag/zoom it to any extent. It's kinda working that way. But the aside upon zooming leaves the boundary of the outer div.

How can I prevent that from happening?

FYI, I ain't a CSS guy.

PS: If I change that aside into another div (let's name it inner div), the div loses it's drag-ability. It's a big deal in country side.

Help? Gracias.

HTML:

<div style="position:relative;background-color:#ffff99;">
<aside  draggable="true" id="dragme" class="imgContent">
    This is an aside, drag me.
</aside>    
This is the parent div.
 <br>
This is the parent div.
This is the parent div.
<br>
The aside should always stay inside this div.
<br>
I am trying to make sure that the aside won't zoom more than the outer div's boundary.
<br>
What should be done to acheive that?
</div>

CSS:

aside { 
    position:  absolute;
    left: 0;
    top: 0;
    width: 200px; 
    background: rgba(255,255,255,0.66); 
    border: 2px  solid rgba(0,0,0,0.5); 
    border-radius: 4px; padding: 8px;
}

.imgContent 
{  width:120px; height:75px; resize:both; overflow:hidden; background-color:#ffff99; padding:5px;}

Fiddle

Upvotes: 1

Views: 1951

Answers (1)

Pavel Gatnar
Pavel Gatnar

Reputation: 4053

To stay within the parent div simply add overflow:hidden; to the parent div. To adjust position and/or size of aside not to overflow the parent div you have to handle mouseup/mousemove events using javascript.

Upvotes: 2

Related Questions