title: auto-width, percentages and fixed width resulting in DIV wrap
body: <p>I would like to have like a three columns page where the one in the middle has a dynamic width (window resize) AND a minimum one (<code>div #middle</code>: <code>min-width:400px;</code>).</p>
  
  <p>Problem is that the third column is wrapping when I resize.</p>
  
  <p>I know if I replace the <code>#middle div width:75%;</code> by <code>width:500px;</code> this would work and the right column won't wrap, but I won't have a dynamic width middle column anymore...</p>
  
  <p>How an I solve this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#contentwraper {
    position: relative;
    min-width: 800px;
  }
  
  #left {
    position: relative;
    float: left;
    background-image: url("http://www.artetics.com/images/artfrontpageslideshow.png");
    background-repeat: no-repeat;
    background-position: center center;
    min-width: 128px;
    width: 12%;
    height: 128px;
  }
  
  #middle {
    position: relative;
    float: left;
    min-width: 400px;
    width: 75%;
    text-align: center;
  }
  
  #right {
    position: relative;
    float: left;
    background-image: url("http://www.emoticonswallpapers.com/avatar/art/Test-Card.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    min-width: 128px;
    width: 12%;
    height: 128px;
  }
  
  .imagemiddle {
    position: relative;
    float: left;
    background-image: url("http://www.tradewindscientific.com/images/t_logo.gif");
    background-repeat: no-repeat;
    background-position: center center;
    width: 25%;
    height: 128px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="contentwraper"&gt;
    &lt;div id="left"&gt;&lt;/div&gt;
    &lt;div id="middle"&gt;
      &lt;div class="imagemiddle"&gt;&lt;/div&gt;
      &lt;div class="imagemiddle"&gt;&lt;/div&gt;
      &lt;div class="imagemiddle"&gt;&lt;/div&gt;
      &lt;div class="imagemiddle"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="right"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>