title: Clean way to palce div boxes with border next to each other - resulting into a 1 px wide borders
body: <p><a href="http://jsfiddle.net/rrL7A/" rel="nofollow noreferrer">Ok following scenario in jsfiddle</a>. The squares are coming from a CMS, i cannot hard code something. I need a clean way to always get 1 border thickness. At the moment the border thickness is sometimes 1 px and sometimes 2 px. The width of the container is given and it will always be 3 squares wide. So it will never have, say, 2 squares. Always $number_of_squares % 3 === 0
  See screenshot</p>
  
  <p><img src="https://i.stack.imgur.com/MRa10.png" alt="enter image description here"></p>
  
  <p>Is there a trick to it?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div{
      display:inline-block;
      height: 100px;
      width: 100px;
      vertical-align: top;
      background-color: burlywood;
      border: 1px solid #ccc;
  }
  
  .container{
      width: 400px;
      height: 400px;
      background-color: white;
      border: none;
  }
  </code></pre>
  
  <p>See <a href="http://jsfiddle.net/rrL7A/" rel="nofollow noreferrer">jsfiddle</a></p>