title: Why my div is going outside of its parent div?
body: <p>Div with id "message-box" is going outside its parent div "message-container"
  I dont understand why?</p>
  
  <p>I used "overflow:auto;" in my css for "message-box". but still its not giving me the desired result. margin left is not working properly when i use "overflow:auto" on "message-box". </p>
  
  <p><strong>Below is my HTML file:</strong> </p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="styles.css" &gt;  
  &lt;title&gt;temp&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="main"&gt;
  
  &lt;div id="header"&gt;header&lt;/div&gt;
  
  &lt;div id="container"&gt;
      &lt;div id="user-container"&gt;user&lt;/div&gt;
  
      &lt;div id="message-container"&gt;
          &lt;div id="message-box"&gt;message box&lt;/div&gt;
          &lt;div id="text-box"&gt; text box&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;footer&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Below is my CSS file:</strong> </p>
  
  <pre><code>#main{
      border: 1px solid red;
      margin: 5px;
  }
  
  #header{
      border: 1px solid red;
      height:30px;
      margin: 10px;
  }
  
  #container{
      margin:10px;
      height:32em;
  }
  #footer{
      border: 1px solid red;
      height:30px;
      margin: 10px;
  }
  
  #user-container{
      border: 1px solid red;
      float:left;
      width:120px;
      height:32em;    
  }
  #message-container{
      border: 1px solid red;
      height:32em;
      width:100%;
  
  }
  #message-box{
      border: 1px solid grey;
      overflow:auto;
      margin:5px;
  }
  #text-box{
      border:1px solid grey;
      overflow:auto;
      margin:5px;
  }
  </code></pre>
  
  <p>please someone help me out here.</p>