title: simple 3 Column responsive layout
body: <p>I have a simple three column layout that I cannot seem to get working. This will probably be super easy for most of you but for some reason I cannot get it working. </p>
  
  <pre><code>&lt;div&gt;min-width&lt;/div&gt;&lt;div&gt;stay in center&lt;/div&gt;&lt;div&gt;min-width&lt;/div&gt;
  </code></pre>
  
  <p>here is the jsfiddle - <a href="http://jsfiddle.net/x7Atq/" rel="nofollow">http://jsfiddle.net/x7Atq/</a></p>
  
  <p>the fiddle looks like crap but basically the left / right column should size down to the min-width then start shrinking the middle down and all the containers should stay 30px margin between each other...right now when it hits min-width the second / middle container moves over the first container as the browser window is resized, I need the box to stay put, just keep getting smaller...as if the two sides were to smush in on the middle container</p>
  
  <p>trying to do this with just css so no third party anything if possible, I know of things like the perfect three column layout and bootsrap but I feel like there has to be a pure css solution for this?!</p>