title: Gallery using Ul LI float
body: <p>I have a Gallery view where i use UL LI element with float left to make it sit like a gallery in as many lines a needed based on the content. After the first line it seems to go hay wire as shown below. Looks like the problem is in Firefox on both MAC/Win7</p>
  
  <p><img src="https://i.stack.imgur.com/SWm7C.jpg" alt="enter image description here"></p>
  
  <p>Link: <a href="http://archangle.mink7.com/portfolios" rel="nofollow noreferrer">http://archangle.mink7.com/portfolios</a> (footer Gallery)</p>
  
  <pre><code>&lt;ul class="gallery"&gt;
                                        &lt;li&gt; &lt;a href="#"&gt; &lt;img alt="video" src="/img/portfolios/video.jpg"&gt;   &lt;span&gt;&lt;i class="fa fa-link"&gt;&lt;/i&gt;&lt;/span&gt; &lt;/a&gt; &lt;/li&gt;
                                        &lt;li&gt; &lt;a href="#"&gt; &lt;img alt="Concept Gallery" src="/img/portfolios/concept-gallery-2.jpg"&gt;   &lt;span&gt;&lt;i class="fa fa-link"&gt;&lt;/i&gt;&lt;/span&gt; &lt;/a&gt; &lt;/li&gt;
                                        &lt;li&gt; &lt;a href="#"&gt; &lt;img alt="Concept Gallery" src="/img/portfolios/concept.jpg"&gt;   &lt;span&gt;&lt;i class="fa fa-link"&gt;&lt;/i&gt;&lt;/span&gt; &lt;/a&gt; &lt;/li&gt;
                                        &lt;li&gt; &lt;a href="#"&gt; &lt;img alt="Residential Gallery" src="/img/portfolios/residential-gallery2.jpg"&gt;   &lt;span&gt;&lt;i class="fa fa-link"&gt;&lt;/i&gt;&lt;/span&gt; &lt;/a&gt; &lt;/li&gt;
                                        &lt;li&gt; &lt;a href="#"&gt; &lt;img alt="Residential Gallery" src="/img/portfolios/residential-gallery-1.jpg"&gt;   &lt;span&gt;&lt;i class="fa fa-link"&gt;&lt;/i&gt;&lt;/span&gt; &lt;/a&gt; &lt;/li&gt;
                                        &lt;li&gt; &lt;a href="#"&gt; &lt;img alt="Commercial Image" src="/img/portfolios/commercial-gallery-2.jpg"&gt;   &lt;span&gt;&lt;i class="fa fa-link"&gt;&lt;/i&gt;&lt;/span&gt; &lt;/a&gt; &lt;/li&gt;
                                      &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.gallery {
      list-style: none outside none;
      margin: 0;
      padding: 0;
  }
  .gallery li {
      float: left;
      width: 33%;
  }
  .comment-image, .gallery li, .post-small .image, .post-image, .portfolio-item {
      display: block;
      position: relative;
  }
  </code></pre>