title: CSS - Multiple Columns with min-width & max-width
body: <p>I'm having a bit of a "moment" where I am stumped on an issue I thought should be pretty easy (and probably is, I'm just over complicating I'm sure).</p>
  
  <p>I'm looking to have a <code>div</code> with multiple children <code>div's</code>; the children should automatically expand or contract based on the number there are (the site I'm working on is in a CMS that allows a user to add or remove items).</p>
  
  <p>My issue is having the <code>div's</code> respect the min- and max-width declaration. I have a hunch that it could be something to do with them being <code>float:left</code>, but I've tried a few other variations with no luck.</p>
  
  <p><strong>My main objective is to get these columns to fill their space on one "row", up to 4 columns.</strong></p>
  
  <p><em><strong>EDIT:</em></strong> I need to have these columns be a minimum width, as well as a maximum width. So if there are 3 child <code>div's</code>, they should all be wider than if there were 4 child <code>div's</code>.</p>
  
  <p>Here is an example of my code: <a href="http://codepen.io/joe/full/IJvGp" rel="nofollow">http://codepen.io/joe/full/IJvGp</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="sub cf"&gt;
    &lt;div class="row"&gt;
        &lt;div class="col"&gt;
            Column 1
        &lt;/div&gt;
  
      &lt;div class="col"&gt;
          Column 2
        &lt;/div&gt;
  
        &lt;div class="col"&gt;
          Column 3
      &lt;/div&gt;
  
      &lt;div class="col"&gt;
          Column 4
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.sub {
    width: 670px;
    background: #fff;
    border: 10px solid #414042;
  }
  
  .sub .row {
    padding: 0;
    float: left;
    width: 100%;
  }
  
  .sub .row .col {
    min-width: 166px;
    max-width: 222px;
    width: 100%;
    float: left;
    border-right: 1px solid #D0D2D3; 
    margin: 0;
    padding: 0;
  }
  
  
  .cf::before, .cf::after {
    content: "";
    display: table;
  }
  .cf::after {
    clear: both;
  }
  </code></pre>