Why is my div moving to right whenever I add "overflow-y: scroll"?

Question

Why is my div moving to right whenever I specify overflow-y: scroll on the .messages element?

Even when I use margin-left: -10px;, it doesn't move to the left!

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,900);
@import url(http://weloveiconfonts.com/api/?family=entypo);
 [class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
* {
  box-sizing: border-box;
  margin: 0;
}
body {
  background: #BDC1C6;
  font-family: 'Roboto';
}
p {
  font-weight: 300;
}
.chat {
  width: 300px;
  background: #fff;
  margin: 0 auto;
}
header {
  background: #35323C;
  height: 50px;
  padding: 5px 10px;
}
.menu-icon {
  background: #2F2E33;
  padding: 5px 10px;
  float: left;
  font-size: 3em;
  line-height: 0.5em;
  color: #fff;
  border-radius: 3px;
}
.menu-icon:hover {
  background: #39caad;
  cursor: pointer;
}
h1 {
  float: right;
  color: #fff;
  margin: 5px;
  font-weight: 300;
  font-size: 1.3em;
}
.menulist {
  background: #39caad;
  color: #fff;
  text-align: center;
  padding: 10px;
}
.menulist:hover {
  cursor: pointer;
  background: rgb(255, 0, 0);
  text-align: center;
  padding: 20px;
}
.openchat {
  background: #39caad;
  color: #fff;
  text-align: center;
  padding: 5px;
}
.new {
  background: rgb(57, 202, 173);
  color: #fff;
  text-align: center;
  padding: 20px;
}
.new:hover {
  cursor: pointer;
  background: rgba(57, 202, 173, 0.9);
}
.messages {
  padding: 10px;
  overflow-y: scroll;
  height: 300px;
}
.message {
  float: left;
  width: 100%;
  margin: 10px 0;
  border-bottom: 1px solid #ccc;
}
.message p {
  font-size: 0.8em;
  width: 90%;
  margin: 5px 0;
}
.message:hover {
  background: #39caad;
  cursor: pointer;
}
.messageSender {
  text-align: right;
  float: right;
  width: 100%;
  margin: 10px 0;
  border-bottom: 1px solid #ccc;
}
.messageSender p {
  font-size: 0.8em;
  width: 90%;
  margin: 5px 0;
}
.messageReceiver {
  float: left;
  width: 100%;
  margin: 10px 0;
  border-bottom: 1px solid #ccc;
}
.messageReceiver p {
  font-size: 0.8em;
  width: 90%;
  margin: 5px 0;
}
img {
  border-radius: 100%;
  float: left;
  margin: 0 10px 15px 0;
}
img.sender {
  border-radius: 100%;
  float: right !important;
  margin: 0 10px 15px 0;
  width: 35px;
  height: 35px;
}
img.receiver {
  border-radius: 100%;
  float: left;
  margin: 0 10px 15px 0;
  width: 35px;
  height: 35px;
}
p.time {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 400;
}
p.chattime {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 400;
  font-size: 10px;
}
h2 {
  font-size: 1em;
  font-weight: 400;
}
h2:after {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  background: #39caad;
  border-radius: 100%;
  margin-left: 5px;
}
h2.send:before {
  content: '';
  display: inline-block;
  height: 10px;
  width: 10px;
  background: #39caad;
  border-radius: 100%;
  margin-left: 5px;
}
h2.send:after {
  content: '';
  height: 0px;
  width: 0px;
  border-radius: 00%;
  margin-right: 5px;
}
footer {
  width: 100%;
  background: #fff;
  padding: 10px;
  text-align: center;
  font-size: 0.8em;
}
footer p:before,
footer p:after {
  content: ' - ';
}

<div class="chat">
  <header>
    <div class="menu-icon" id="menubutton"><span class="entypo-menu"></span>
    </div>

    <h1>Chats</h1>
  </header>
  <?php include( "menu.php"); ?>
  <div class="openchat" id="openchat">
    <img style="width:35px; height: 35px;" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg" />
    <h2>XYZ</h2>
    <p class="time">Online</p>
  </div>
  <section class="messages" id="chatBox">
    <div class="messageReceiver">
      <img class="receiver" src="assets/users/1.jpg">
      <h2 class="receive">Admin 1</h2>
      <p class="chattime">12:00:00 AM, 3rd Jan16</p>
      <p>There ?</p>
    </div>
    <br>
    <br>
    <div class="messageSender">
      <img class="sender" src="assets/users/2.jpg">
      <h2 class="send"> You</h2>
      <p class="chattime">12:00:00 AM, 4th Jan16</p>
      <p>Yes</p>
    </div>
    <br>
    <br>
    <div class="messageReceiver">
      <img class="receiver" src="http://dtechnomist.com/clients/chat/assets/users/1.jpg">
      <h2 class="receive">Admin 1</h2>
      <p class="chattime">08:59:33 PM, 4th Jan16</p>
      <p></p>
    </div>
    <div class="messageReceiver">
      <img class="receiver" src="assets/users/1.jpg">
      <h2 class="receive">Admin 1</h2>
      <p class="chattime">09:05:55 PM, 4th Jan16</p>
      <p>hi</p>
    </div>
    <br>
    <br>
    <div class="messageReceiver">
      <img class="receiver" src="http://dtechnomist.com/clients/chat/assets/users/1.jpg">
      <h2 class="receive">Admin 1</h2>
      <p class="chattime">09:06:02 PM, 4th Jan16</p>
      <p>ok</p>
    </div>
    <br>
    <br>
    <div class="messageSender">
      <img class="sender" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg">
      <h2 class="send"> You</h2>
      <p class="chattime">09:06:58 PM, 4th Jan16</p>
      <p>hello</p>
    </div>
    <br>
    <br>
    <div class="messageSender">
      <img class="sender" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg">
      <h2 class="send"> You</h2>
      <p class="chattime">09:07:08 PM, 4th Jan16</p>
      <p>hi</p>
    </div>
    <br>
    <br>
    <div class="messageSender">
      <img class="sender" src="http://dtechnomist.com/clients/chat/assets/users/2.jpg">
      <h2 class="send"> You</h2>
      <p class="chattime">09:07:31 PM, 4th Jan16</p>
      <p>asd</p>
    </div>
  </section>
  <section class="write">
    <textarea type="text" name="msg" id="msg" style="width:85%; height: 30px; margin: 0px 0px 0px 2%; resize: none" placeholder="Type your message here..."></textarea>
    <button name="send" id="sendMsg" style="width: 9%;"><span class="entypo-plus"></span>Send</button>
  </section>
  <footer>
    <p>Designed by <a href="kashanshah.tk">Kashan Shah</a>
    </p>
  </footer>
</div>

Answer 1

You're seeing this behavior due to collapsing margins.

When you add overflow-y: scroll to the element, a new block formatting context is established, which means that the .openchat element's vertical margin no longer collapses with the .messages element. Since the margins no longer collapse, the element is shifted to the right.

Margins of elements that establish new block formatting contexts (such as floats and elements with overflow other than visible) do not collapse with their in-flow children.

To resolve this issue, you could either add overflow: hidden to the .openchat element in order hide the overflowing margin (which essentially prevents the margin from adjoining):

Updated Example

.openchat {
    background: #39caad;
    color: #fff;
    text-align: center;
    padding: 5px;
    overflow: hidden;
}

---

Alternatively, you could also just remove the margin-bottom from the child img element:

Updated Example

.openchat img {
  margin-bottom: 0;
}