title: Why adding line border to a css messes up its correct displacement?
body: <p>Based on <a href="http://jsfiddle.net/P3GpM/5/" rel="nofollow noreferrer">answer</a> from another <a href="https://stackoverflow.com/questions/22163429/how-to-place-a-new-generated-div-aside-to-another-div">question</a> I tried to add a line border to a div placed inside an outer one.</p>
  
  <p>However this causes the div to <a href="http://jsfiddle.net/diegoaguilar/7g4LJ/" rel="nofollow noreferrer">mess up</a> Why?</p>
  
  <p><strong>Mark up</strong></p>
  
  <pre><code>&lt;div id="outer"&gt;
          &lt;div id="chart"&gt;&lt;/div&gt;
          &lt;div id="table"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#outer{
  
  width: 1300px; 
  height: 640px;
  border: 1px solid black;
  }
  
  #chart{
  
    float:left;
    width: 900px;
    height: 100%;
    left:0;
    background-color: red;
  }
  
  #table{
  
    float:right;
    width: 400px;
    height: 100%;
    right:400;
    background-color: yellow;
    border: 1px solid back;
  
  }
  </code></pre>