title: How to outline the div tag?
body: <p>I try to outline the div tag. I used <code>border:0.01em solid black</code> but it is not correctly fit.
  My script below</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div id="color" style="width:100%; height:500px; background:gray;"&gt;
  &lt;div style="width:50%; height:500px; background:yellow;  float:left;"&gt;&lt;/div&gt;
  &lt;div style="width:50%; height:500px; background:blue; float:left;"&gt;    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="border" style="width:100%; height:500px; background:gray;"&gt;
  &lt;div style="width:50%; height:500px; border:0.01em solid black;  float:left;"&gt;&lt;/div&gt;
  &lt;div style="width:50%; height:500px; border:0.01em solid black; float:left;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>That equal sepration of the <code>div id = color</code> tag is fit into the 100% width.</p>
  
  <p>But equal sepration of the <code>div id = border</code> tag is not fit into the 100% 
  because i added the <code>border</code> to seprate <code>div</code> tags, so size is increase like 50% + 0.01em. </p>
  
  <p>That the reason <code>div id = border</code> tag's sub div tag is not fit into the 100%, so the second sub div tag is fall in down from 100%. </p>
  
  <p>So i want to outline
  the div tag not to border it? How can i do it? But i want to seprate by the 50% i not decrese it.</p>