title: CSS using percentage and margin, padding or border
body: <p>I have a problem which I do not understand.
  If I use percentage in width, I would expect that elements calculate borders, margins or paddings within their size (in percentage).
  But in fact those values are added to their size which I asume is wrong.
  Is my expectation wrong?
  The bellow example shows the issue. The both "divs" "left" and "right" I expect to be in a single line. If I remove "border" it works as expected.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  .center {
    border: 1px solid black;
    width: 100%;
    overflow: auto;
  }
  
  .left {
    border: 1px solid black;
    width: 20%;
    float: left;
  }
  
  .right {
    border: 1px solid black;
    width: 80%;
    float: left;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="center"&gt;
    &lt;div class="left"&gt;left&lt;/div&gt;
    &lt;div class="right"&gt;right&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>