I have a unique setup with two nested divs that are both draggable. When I move the parent div (moveablecontainer), the child div (box.opened) follows smoothly as programmed. Everything works well in this scenario.
However, when I resize the browser window, the child div ends up moving along with the body of the browser instead of staying next to its parent div (moveablecontainer). The parent div remains static unless dragged.
Here is the CSS for the two divs:
PARENT DIV
.moveablecontainer {
position: absolute;
left: 615px;
top: 10px;
width: 100px;
border: 0;
height: 450px;
max-height: 95px;
background-color: transparent;
z-index: 1000000;
}
CHILD DIV inside parent:
.box {
max-height: 0px;
}
.box.opened {
position: absolute;
max-height: 400px;
padding-top: 45px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 20px;
margin-left: 0px;
border-radius: 5px;
top: 0;
box-shadow: 0px 0px 15px black;
-webkit-box-shadow: 0px 0px 15px black;
background-color: #ffffff;
overflow: hidden;
height: auto;
width: 325px;
float: right;
left: 10px;
z-index: 100000;
}
.box.closed {
display: none;
max-height: 0px;
}
A simplified version of the HTML structure for the two divs is as below:
<div class="moveablecontainer">
<!--AVATAR GOES HERE-->
<div class="box opened">
<!--CHAT WINDOW GOES HERE-->
</div>
</div>
The positions can be visualized below:
INITIAL STATE:
https://i.sstatic.net/hxbA7.png
BROWSER SMALLER:
https://i.sstatic.net/ChRE3.png
EXPECTED BEHAVIOR:
My goal is to ensure that the chat window (child) stays with the avatar (parent) regardless of how the browser window is sized or resized.
Any insights on how to achieve this desired behavior?