How to stack three divs horizontally in parent div with fluid proportions and position each child div individually?

Question

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.

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.

Here's my Fiddle with code: http://jsfiddle.net/mkerny45/97mt7/7/

Screenshot of desired result: http://d.pr/i/KUfd (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.)

Code

<div class="articles">
  <article>
    <img src="http://placehold.it/380x214/000000&text=Left" />
  </article>

  <article>
    <img src="http://placehold.it/380x214/3D6AA2&text=Middle" />
  </article>

  <article>
    <img src="http://placehold.it/380x214/98BD56&text=Right" />
  </article>
</div>

Answer 1

You can achieve this using text-align:justify to space the div's evenly so they are flush to the edges. Then you add a span class with a width of 100% to force the width of the wrapper.

DEMO -> http://jsfiddle.net/spUKQ/2/

HTML

<div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <span class="stretch"></span>
</div>

CSS

#container {
    border: 2px dashed #444;
    height: 125px;

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */
    min-width: 612px;
}

.box1, .box2, .box3 {
    width: 150px;
    height: 125px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

/* just for demo */
.box1, .box3 {
    background: #ccc
}
.box2 {
    background: #0ff
}