title: How can I make specific DIVs resize on window resize for a responsive layout?
body: <p>Here's the code i'm working with.</p>
  
  <p><a href="http://jsfiddle.net/qLjgM/2/" rel="nofollow">http://jsfiddle.net/qLjgM/2/</a></p>
  
  <p>Basically, as the browser window is resized (getting smaller). I'm trying to force the 2 divs (MIDDLE 2-COLUMN and MIDDLE 3-COLUMN) to resize untill it hits a minimum size width of 200px for MIDDLE 3-COLUMN and 300px for MIDDLE 2-COLUMN.</p>
  
  <pre><code>#wrapper {
  margin:0 auto;
  width:100%;
  max-width:500px;
  }
  
  #content-pad {
  width:100%;
  max-width:500px;
  margin:0px;
  background:#CCC;
  font-size:12px;
  }
  
  #left-col {
  float:left;
  width:100px;
  margin-top:12px;
  background:#CCC;
  }
  
  #mid-col {
  float:left;
  width:100%;
  min-width:200px;
  max-width:270px;
  margin-left:15px;
  margin-top:12px;
  background:#CCC;
  }
  
  #mid-col-wide {
  float:left;
  width:100%;
  min-width:300px;
  max-width:385px;
  margin-left:15px;
  margin-top:12px;
  background:#CCC;
  }
  
  #right-col {
  float:left;
  width:100px;
  margin-left:15px;
  margin-top:12px;
  background:#CCC;
  }
  </code></pre>
  
  <p>I'm using float to align them inline so to speak, but it gives me trouble with the columns to the right just snapping below the LEFT SIDE and I want to avoid that as well.</p>
  
  <p>Any help would be greatly appreciated.</p>