Create a collage for a carousel made with owlcarou

Question

I am using a plugin called owlcarousel 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.

When the carousel is working fine, this how is displayed :

On Firefox,this is how, it looks:

Now, this is the part of my code concerning the carousel (HTML):

<div class="container">
						<div class="carousel-featured-sellers">
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
								
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>

								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
							<div class="featured-sellers-collage">
								<div class="div1">
									<p><img src="images/189x324-4.jpg" alt=""/></p>
									<p><img src="images/189x324-5.jpg" alt=""/></p>
								</div>
								
								<div class="div2">
									<img src="images/380x325-6.jpg" alt=""/>
								</div>
							</div>
							
						</div>
					</div>
					<script src="js/jquery-1.12.2.min.js"></script>
					<script src="js/owl.carousel.min.js"></script>
					<script>
						(function($){
				
							$('.carousel-featured-sellers').owlCarousel({
								items: 3,
								loop:true,
								margin:15,
								nav:true,
								navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
								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);
					</script>

The part, concerning the style (CSS):

.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;
}

Please, let me know how to solve that issue.

Answer 1

Your div2 needs to do a clear since you are floating the p tags in div1, clear: both;. You can just add it to your .featured-sellers-collage .div2 class, like so:

.featured-sellers-collage .div2 {
    width: 100%;
    margin-bottom: 0;
    clear: both;
 }

I believe this will fix your problem.