title: How to stack three divs horizontally in parent div with fluid proportions and position each child div individually?
body: <p>I am looking to take three divs and stack them horizontally (right next to each other) in a containing div. This containing div has a fluid width so that when the browser is scaled in (this is for a responsive design) the three child divs scale proportionally. In addition the three child divs have to be positioned individually so that the left-most div is on the left, the middle div is centered, and the right-most div is all the way to the right side of containing div.</p>
  
  <p>I've tried to accomplish this by setting the container div to display: table and the three child divs to display: table-cell -- this works great except for I can't get the three child divs to be positioned in the way in which I described above. I tried border-spacing on the parent div; however, this doesn't work well with my goal. </p>
  
  <p><strong>Here's my Fiddle with code: <a href="http://jsfiddle.net/mkerny45/97mt7/7/" rel="nofollow">http://jsfiddle.net/mkerny45/97mt7/7/</a></strong></p>
  
  <p><strong>Screenshot of desired result: <a href="http://d.pr/i/KUfd" rel="nofollow">http://d.pr/i/KUfd</a></strong>
  (Here you will see three child divs: left, middle, right in a containing div. The left and right divs are all the way to the left/right side respectively and center div is in center of containing div. The margin is is also depicted in the photo. I would like for the entire containing div and child divs to scale down proportionally and have the child divs always stay positioned in their appropriate location.)</p>
  
  <p><strong>Code</strong>
      </p>
  
  <p></p>
  
  <pre><code>&lt;div class="articles"&gt;
    &lt;article&gt;
      &lt;img src="http://placehold.it/380x214/000000&amp;text=Left" /&gt;
    &lt;/article&gt;
  
    &lt;article&gt;
      &lt;img src="http://placehold.it/380x214/3D6AA2&amp;text=Middle" /&gt;
    &lt;/article&gt;
  
    &lt;article&gt;
      &lt;img src="http://placehold.it/380x214/98BD56&amp;text=Right" /&gt;
    &lt;/article&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>