title: border cause DIV overflow
body: <p>I have a root div with width:80% and a child with width:100%, when I add to the child a border a scroll bar appear. I guess it's because 100% width + 1px border overflow. Can I avoid such problem? How to define a child div as wide as the parent including borders?</p>
  
  <p>I need this to run on IE8</p>
  
  <pre><code>&lt;div style="width:80%;overflow:auto;"&gt;
      &lt;div style="float:left;width:100%;border-left:1px solid;"&gt;
          &lt;div class="title"&gt;Title1&lt;/div&gt;
          &lt;div style="width:100%;"&gt;
              &lt;div class="title"&gt;Title2&lt;/div&gt;
              &lt;div class="title"&gt;Title3&lt;/div&gt;
          &lt;/div&gt;
          &lt;div style="clear:both;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;text&lt;/div&gt;
      &lt;div&gt;text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div.title {
      float: left;
      width:33%;
  }
  </code></pre>
  
  <p>Example: <a href="http://jsfiddle.net/FN3mv/" rel="noreferrer">http://jsfiddle.net/FN3mv/</a></p>