title: CSS fluid two column and min-width
body: <p>I have a two-column fluid layout, with the left-hand side set to <code>width: 40%</code> and the right-hide side set to <code>width: 60%</code>. I'd like to allow users to resize their browser as large or small as they'd like, but I must have the left-hand side display a <strong>minimum width of <code>300px</code></strong>.</p>
  
  <p>The following is the code I am currently using for the fluid layout, which includes the <code>min-width</code> specification. But, CSS is ignoring it! It allows the left-hand column to shrink below <code>300px</code>.</p>
  
  <p>I've also attempted to set <code>min-width</code> to a percentage, such as <code>20%</code>, but CSS ignores this specification as well.</p>
  
  <pre><code>div#left {
  background: #ccc;
  position: fixed;
  top: 0;
  bottom: 0; 
  left: 0;
  width: 40%;
  min-width:300px;
  height: 100%;
  }
  
  div#right {
  background: #aaa;
  position: fixed;
  top: 0; 
  width:60%;
  right: 0;
  bottom: 0;
  }
  ​
  </code></pre>
  
  <p><strong>jsFiddle Fullscreen Example:</strong> <a href="http://jsfiddle.net/umgvR/3/embedded/result/" rel="nofollow">http://jsfiddle.net/umgvR/3/embedded/result/</a></p>
  
  <p><strong>jsFiddle Code:</strong> <a href="http://jsfiddle.net/umgvR/3/" rel="nofollow">http://jsfiddle.net/umgvR/3/</a></p>
  
  <p>What is causing this? How can the code be corrected?</p>