CSS - resizing a div affects neighboring divs - html

Question

I have a basic chat site. A chat box in the middle, users hit enter when sending messages. And there's an ajax populated list of the currently logged in users on the right-hand side.
.chat {
margin-top: 10px;
}
.chat .messages {
background-color: white;
border: 1px solid #ccc;
width: 300px;
height: 250px;
padding: 10px;
resize: both;
overflow: auto;
margin: 0 auto;
font-weight: bold;
}
.present {
float: right;
margin-top: -400px;
margin-right: 50px;
color: white;
}
.present .name {
text-align: center;
}
.name::before {
content: url("img/blue_dot.png");
margin-right: 10px;
}
<div class="chat">
<div class="messages"></div>
<input type="image" id="imgClick" src="css/img/arrow.png">
<textarea class="entry" placeholder="Enter or arrow to send
Shift+enter for new line"></textarea>
</div>
<div class="indexBoxes">
<form action="index.php" method="POST">
<input type="submit" class="btn btn-info" name="logout" value="Logout">
</form>
</div>
<div class="present">
</div>
Now, since I set the chatbox to be resizable (resize:both), when a user tries to change its size, the list of the present users on the right side of the screen <div class="present"></div> also moves with it. If the user changes the height - drags it downwards - the list also goes down. I tried to prevent it by giving the list the position: absolute to take it out of the flow and then move it back to the right, but it didn't work, still moves with the chat. I also tried not using margin: 0 auto to center the box, thinking that it would have any effects, but that didn't work either.
Any suggestions would be highly appreciated.
Thanks!

Answer 1

If I understand well you're attempting to fix the 'div' with the class 'present' in the top right corner, aren't you?
If I've understood well your problem then try to take a look in code snippet I've made for your problem.
.chat {
margin-top: 10px;
}
.chat .messages {
background-color: white;
border: 1px solid #ccc;
width: 300px;
height: 250px;
padding: 10px;
resize: both;
overflow: auto;
margin: 0 auto;
font-weight: bold;
}
.present {
float: right;
margin-right: 50px;
position: absolute; /*added*/
right: 0; /*added*/
top: 0; /*added*/
color: black;
}
.present .name {
text-align: center;
}
.name::before {
content: url("img/blue_dot.png");
margin-right: 10px;
}
<div class="chat">
<div class="messages"></div>
<input type="image" id="imgClick" src="css/img/arrow.png">
<textarea class="entry" placeholder="Enter or arrow to send
Shift+enter for new line"></textarea>
</div>
<div class="indexBoxes">
<form action="index.php" method="POST">
<input type="submit" class="btn btn-info" name="logout" value="Logout">
</form>
</div>
<div class="present">User123<br>User321</div>
Let me know if you need further explanation.