Is there a way to stack three divs horizontally within a fluid-width container div, with each child div scaling proportionally when the browser is resized for responsive design? The left-most div should be on the left, the middle div centered, and the right-most div all the way to the right inside the containing div.
I attempted using display: table for the container div and display: table-cell for the child divs, but I couldn't achieve the desired positioning. Setting border-spacing on the parent div didn't work well either.
View my code on Fiddle: http://jsfiddle.net/mkerny45/97mt7/7/
Here's a screenshot of the desired layout: (Three child divs - left, middle, right - inside a containing div. Left and right divs flush against their respective edges, while the center div is in the middle. The margins are defined in the image. I want the entire structure to scale down proportionally as the browser size changes, maintaining the positions of the child divs.)
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>