Databases
StackOverflow2013
Postsdbo
POFloated items in "gallery" layout break to next line at random browser widths
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFloated items in "gallery" layout break to next line at random browser widths
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload