title: Why the width of the floated parent doesn't depends from negative margin of its child?
body: <p>I have 3 blocks
    One parent, and two child. All floated.
  The child blocks take the width in percent (30%, and 70%).
  Second One of them (width 70%) has negative margin which is equal to its own width (<code>margin-left:-70%</code>). Therefore it shifted to the left and covers the first (width 30%) block.
  But the parent block, which is also has float:left, anyway saves the width.</p>
  
  <p>Please see the:
  <a href="https://jsfiddle.net/f9Lj6nuc/2/" rel="nofollow">online example</a></p>
  
  <pre><code>.main-container {
    float:left;
  }
  
      .sidebar-left {
        float:left;
        width: 30%;
      }
  
      .sidebar-right {
        width: 70%;
        margin-left:-70%;
      }
  </code></pre>
  
  <ol>
  <li><p>why the parent block doesn't shrinks by horizontal line?</p></li>
  <li><p>how all the blocks calculate the width?</p></li>
  </ol>
  
  <p>I suppose - the parent calculate its width from total width of the child blocks (And no matter that one of them is shifted). And the width of the child blocks depends from them content.
  Where can I read to understand this behavior?</p>