title: Responsive 3-Column-Layout, with a right column set to min-width
body: <p>I want to have a responsive layout which behaves like this:</p>
  
  <ul>
  <li>BIG SCREEN (<em>left</em> and <em>right</em> div bigger than 250px):The <em>content</em> div should be centered between the <em>left</em> and the <em>right</em> div.</li>
  <li>SMALL SCREEN: The <em>right</em> div should have a minimum width of 250px. The <em>left</em> div should collapse first, then the <em>content</em> div.</li>
  </ul>
  
  <p>To illustrate what I mean, here some viewport sizes (the numbers don't matter - I just want to demonstrate the behavior I want) and the corresponding sizes of the <em>left</em>, <em>content</em> and <em>right</em> divs.</p>
  
  <p><strong>Viewport = 1600px</strong></p>
  
  <p>300px | 1000px | 300px</p>
  
  <p><strong>Viewport = 1500px</strong></p>
  
  <p>250px | 1000px | 250px</p>
  
  <p><strong>Viewport = 1400px</strong></p>
  
  <p>150px | 1000px | 250px</p>
  
  <p><strong>Viewport = 1250px</strong></p>
  
  <p>0px | 1000px | 250px</p>
  
  <p><strong>Viewport = 1000px</strong></p>
  
  <p>0px | 750px | 250px</p>
  
  <p>I have no idea how to accomplish this. I'm stuck here:</p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;div id="left"&gt;Left&lt;/div&gt;
  &lt;div id="content"&gt;content&lt;/div&gt;
  &lt;div id="right"&gt;Right&lt;/div&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>body {
    min-width: 800px;
    height: 100%;
  }
  
  html {
    height: 100%;
  }
  
  div#left {
    background: #ccc;
    width: 20%;
    height: 100%;
  }
  
  div#content {
    background: #aaa;
    width: 60%;
    min-width:300px;
    height: 100%;
  }
  
  div#right {
    background: #ccc;
    width:20%;
    height: 100%;
  }
  </code></pre>