title: child div expanding out of parent div issue
body: <p>I want something like <a href="https://www.dropbox.com/s/326t3rhmyzm6n7q/layout.png" rel="nofollow noreferrer">this, click here</a>.</p>
  
  <p>This is a simple code in my HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  #mainContent {
          margin:0;
          width:100%;
          height:600px;
          padding: 0 0 30px 0;
      }
      #mainContent #sidebar { /* sidebar inside #mainContent */
          float:left;
          width:220px;
          height:560px;
          margin:10px 10px 40px 10px;
          padding:10px 5px 10px 5px;
          background-color:#CCCCCC;
      }
      #mainContent #featContent {
          height:560px;
          margin:10px 10px 40px 260px;
          padding:10px 5px 10px 5px;
          background-color:#CCCCCC;
          overflow:auto;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="mainContent"&gt;
      &lt;div id="sidebar"&gt;&lt;/div&gt;
      &lt;div id="featContent"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  
    </code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is one of the divs are improperly placed .The #featContent div is going out of its parent #mainContent div for reason I don't understand. Check out this in jsFiddle <a href="http://jsfiddle.net/4dBdR/1/" rel="nofollow noreferrer">here</a>. The margin of #featContent goes out of the #mainContent bounds.</p>