title: Spacing between 3 columns DIVs
body: <p>Here an example that I want</p>
  
  <p><img src="https://i.stack.imgur.com/VOGQN.jpg" alt="enter image description here"></p>
  
  <p>Those images are loaded from a while loop in MySQL and would like that the spacing between them make in sort that the left column and right are touching each side and the middle in centered. Like the picture :D</p>
  
  <p>The CSS I have:</p>
  
  <pre><code>#realisation .box{
      float:left;
      width:286px;
      background:#fff;
      padding:10px;
      margin-right:20px;
      -moz-box-shadow: 1px 2px 2px #ccc;
      -webkit-box-shadow: 1px 2px 2px #ccc;
      box-shadow: 1px 2px 2px #ccc;
  }
  
  #realisation .box:last-child{
      margin-right:0px;
  }
  </code></pre>
  
  <p>And the loop</p>
  
  <pre><code>&lt;div class="box"&gt;
      &lt;div&gt;&lt;img src="imgs/beta/imgpasrap.jpg" width="286" height="176"/&gt;&lt;/div&gt;
      &lt;p&gt;Text here&lt;/p&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>It's working great for the first 3 box, but more than that, the display is messed up. How could I achieve that like the picture above?</p>