title: How to add borders to div without messing up the layout?
body: <p>I have the following elements:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id="sidebar1"&gt;&lt;/div&gt;
          &lt;div id="content"&gt;
              &lt;h3&gt;Lorem ipsum&lt;/h3&gt; 
              &lt;p&gt;Whatnot.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="sidebar2"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Following this style:</p>
  
  <pre><code>/* ~~ this fixed width container surrounds all other divs~~ */
   #container {
      width: 960px;
      background-color: #FFF;
      margin: 0 auto;
      overflow: hidden;
  }
  #sidebar1 {
      float: left;
      width: 180px;
      /*border: 2px solid black;*/
      background-color: #EADCAE;
      padding: 0px 0px 100% 0px;
  }
  #content {
      padding: 10px 0;
      width: 600px;
      float: left;
  }
  #sidebar2 {
      float: left;
      width: 180px;
      /*border: 2px solid black;*/
      background-color: #EADCAE;
      padding: 0px 0px 100% 0px;
  }
  </code></pre>
  
  <p>I am trying to achieve this layout: <a href="http://jsfiddle.net/QnRe4/" rel="nofollow">http://jsfiddle.net/QnRe4/</a></p>
  
  <p>But as soon as I un-comment the borders it turns into this: <a href="http://jsfiddle.net/FZxPQ/" rel="nofollow">http://jsfiddle.net/FZxPQ/</a></p>
  
  <p><strong>** Solved **</strong></p>
  
  <p>The border width was added to each element's total width making them too wide to fit in the container. Removing 2x the border width from each column's width solves the problem: <a href="http://jsfiddle.net/FZxPQ/4/" rel="nofollow">http://jsfiddle.net/FZxPQ/4/</a></p>