title: Create a collage for a carousel made with owlcarousel
body: <p>I am using a plugin called <code>owlcarousel</code> to create a carousel. The carousel and the collage have been made. The work has been tested on Google Chrome, Safari, Opera andd Firefox. Everything works fine for all of them except Firefox.</p>
  
  <p>When the carousel is working fine, this how is displayed :
  <a href="https://i.stack.imgur.com/IQz34.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IQz34.png" alt="Display of the carousel on Google Chrome"></a></p>
  
  <p>On Firefox,this is how, it looks: 
  <a href="https://i.stack.imgur.com/kQBNU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kQBNU.png" alt="Display of the carousel on Firefox"></a></p>
  
  <p>Now, this is the part of my code concerning the carousel (HTML):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
        &lt;div class="carousel-featured-sellers"&gt;
         &lt;div class="featured-sellers-collage"&gt;
          &lt;div class="div1"&gt;
           &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
           &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
          &lt;/div&gt;
          
          &lt;div class="div2"&gt;
           &lt;img src="images/380x325-6.jpg" alt=""/&gt;
          &lt;/div&gt;
          
         &lt;/div&gt;
         
         &lt;div class="featured-sellers-collage"&gt;
          &lt;div class="div1"&gt;
           &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
           &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
  
          &lt;/div&gt;
          
          &lt;div class="div2"&gt;
           &lt;img src="images/380x325-6.jpg" alt=""/&gt;
          &lt;/div&gt;
         &lt;/div&gt;
         
         &lt;div class="featured-sellers-collage"&gt;
          &lt;div class="div1"&gt;
           &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
           &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
          &lt;/div&gt;
          
          &lt;div class="div2"&gt;
           &lt;img src="images/380x325-6.jpg" alt=""/&gt;
          &lt;/div&gt;
         &lt;/div&gt;
         
         &lt;div class="featured-sellers-collage"&gt;
          &lt;div class="div1"&gt;
           &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
           &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
          &lt;/div&gt;
          
          &lt;div class="div2"&gt;
           &lt;img src="images/380x325-6.jpg" alt=""/&gt;
          &lt;/div&gt;
         &lt;/div&gt;
         
         &lt;div class="featured-sellers-collage"&gt;
          &lt;div class="div1"&gt;
           &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
           &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
          &lt;/div&gt;
          
          &lt;div class="div2"&gt;
           &lt;img src="images/380x325-6.jpg" alt=""/&gt;
          &lt;/div&gt;
         &lt;/div&gt;
         
         &lt;div class="featured-sellers-collage"&gt;
          &lt;div class="div1"&gt;
           &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
           &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
          &lt;/div&gt;
          
          &lt;div class="div2"&gt;
           &lt;img src="images/380x325-6.jpg" alt=""/&gt;
          &lt;/div&gt;
         &lt;/div&gt;
         
         &lt;div class="featured-sellers-collage"&gt;
          &lt;div class="div1"&gt;
           &lt;p&gt;&lt;img src="images/189x324-4.jpg" alt=""/&gt;&lt;/p&gt;
           &lt;p&gt;&lt;img src="images/189x324-5.jpg" alt=""/&gt;&lt;/p&gt;
          &lt;/div&gt;
          
          &lt;div class="div2"&gt;
           &lt;img src="images/380x325-6.jpg" alt=""/&gt;
          &lt;/div&gt;
         &lt;/div&gt;
         
        &lt;/div&gt;
       &lt;/div&gt;
       &lt;script src="js/jquery-1.12.2.min.js"&gt;&lt;/script&gt;
       &lt;script src="js/owl.carousel.min.js"&gt;&lt;/script&gt;
       &lt;script&gt;
        (function($){
      
         $('.carousel-featured-sellers').owlCarousel({
          items: 3,
          loop:true,
          margin:15,
          nav:true,
          navText: ["&lt;span class='carousel-nav-left'&gt;&lt;i class='fa fa-chevron-left'&gt;&lt;/i&gt;&lt;/span&gt;","&lt;span class='carousel-nav-right'&gt;&lt;i class='fa fa-chevron-right'&gt;&lt;/i&gt;&lt;/span&gt;"],
          dots: true,
          responsive:{
           0:{
            items:1
           },
           430:{
            items:2
           },
           800:{
            items:3
           },
           1400:{
            items:4
           },
           1800:{
            items:6
           },
           2400:{
            items:7
           },
           3000:{
            items:9
           }
          }
         })
         
        })(jQuery);
       &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The part, concerning the style (CSS):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.featured-sellers-collage .div1{
   width: 100%;
  }
  .featured-sellers-collage .div1 p {
   margin-bottom: 0;
   margin-top: 0;
   width:50%;
  }
  
  .featured-sellers-collage .div2 {
   width: 100%;
   margin-bottom: 0;
  }
  .featured-sellers-collage .div1 p:first-child {
   float:left;
  }
  .featured-sellers-collage .div1 p:last-child {
   float:right;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please, let me know how to solve that issue.</p>