title: Floated items in "gallery" layout break to next line at random browser widths
body: <p>I have a group of six percentage-width boxes that are supposed to display three per line. They are floated left and all are the same size, but at seemingly random browser widths, the fourth item floats all the way to the right and the last two items are pushed down to a third line. The markup for each is the same and the images are all sized the same, so I'm not sure what could be causing this. The page exists <a href="http://staging.lifestylerevolutionstx.com" rel="nofollow">here</a>. When you adjust the browser width you will see what I mean.</p>
  
  <p>Here is the HTML: </p>
  
  <pre><code>&lt;div class="large-12 columns"&gt;
              &lt;div class="promoItem"&gt; 
                  &lt;img src="img/promo/groupFitness.jpg"&gt;
                  &lt;div class="colorBG"&gt;&lt;/div&gt;
                  &lt;div class="promoLabel"&gt;Group Fitness Classes&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="promoItem"&gt; 
                  &lt;img src="img/promo/mealPlans.jpg"&gt;
                  &lt;div class="colorBG"&gt;&lt;/div&gt;
                  &lt;div class="promoLabel"&gt;Custom Meal Plans&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="promoItem"&gt; 
                  &lt;img src="img/promo/personalTraining.jpg" /&gt;
                  &lt;div class="colorBG"&gt;&lt;/div&gt;
                  &lt;div class="promoLabel"&gt;Personalized Fitness Plans&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="promoItem"&gt; 
                  &lt;img src="img/promo/fitnessVideos.jpg"&gt;
                  &lt;div class="colorBG"&gt;&lt;/div&gt;
                  &lt;div class="promoLabel"&gt;Fitness Videos&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="promoItem"&gt; 
                  &lt;img src="img/promo/healthyRecipes.jpg"&gt;
                  &lt;div class="colorBG"&gt;&lt;/div&gt;
                  &lt;div class="promoLabel"&gt;Healthy Recipes&lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="promoItem"&gt; 
                  &lt;img src="img/promo/emailSignup.png" /&gt;
                  &lt;div class="colorBG"&gt;&lt;/div&gt;
                  &lt;div class="promoLabel"&gt;Join our mailing list&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>div.promoItem { 
    position: relative;
    float: left;
    width: 29.333333%;
    margin: 0 2% 20px 2%;
  }
  
  div.promoItem img { 
    z-index: 1; 
    max-width: 100%;
  }
  div.promoItem div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px;
    height: 35px;
    line-height: 26px;
    text-align: center;
    overflow: hidden;
  
  }
  div.promoItem div.colorBG {
    z-index: 2;
    background-color: #FFD700;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    opacity: 0.75;
  }
  
  div.promoItem:hover div.promoLabel {
    background-color: #FFD700;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
  } 
  
  div.promoItem div.promoLabel {
    z-index: 3;
    color: #0D42C0;
  }
  </code></pre>