CODEWITHSUNDEEP
htmlcss
Lei Lionel
Lei Lionel

Reputation: 1273

Remove a gap between two divs after using float

I have been working on a collage for the last two days and I am facing a problem.

body {
	width: 380px;
}

.featured-sellers-collage {
  width: 100%;
}

.featured-sellers-collage .div1 p {
	top: 0;
	bottom: 0;
	float:left;
	width: 50%;
}
.featured-sellers-collage .div1 p img {
	
	width: 100%;
}

.featured-sellers-collage .div2 {
	flaot: right;
}
<div class="featured-sellers-collage">
	<div class="div1">
      <p><img src="http://lorempixel.com/189/325/" alt="" /></p>
      <p><img src="http://lorempixel.com/189/325/" alt=""/></p>
  </div>
  
  <div class="div2">
    <img src="http://lorempixel.com/380/325/" alt="" />
  </div>

</div>

After running it you can see there is a gap between div1 and div2. Is there any way for me to remove it? (Gap between div1 and div2 should be equal to 0px).

Thanks in advance for your help.

Upvotes: 0

Views: 59

Answers (3)

Adnan Akram
Adnan Akram

Reputation: 641

you need to remove P tag default margin and img default spacing by adding vertical-align: top; and every thing will be fine 

body {
	width: 380px;
}

.featured-sellers-collage {
  width: 100%;
}

.featured-sellers-collage .div1 p {
	top: 0;
	bottom: 0;
	float:left;
	width: 50%;
}
.featured-sellers-collage .div1 p img {
	
	width: 100%;
}
.featured-sellers-collage p{margin: 0;}
 .featured-sellers-collage img{vertical-align: middle;}

.featured-sellers-collage .div2 {
	flaot: right;
}
<div class="featured-sellers-collage">
	<div class="div1">
      <p><img src="http://lorempixel.com/189/325/" alt="" /></p>
      <p><img src="http://lorempixel.com/189/325/" alt=""/></p>
  </div>
  
  <div class="div2">
    <img src="http://lorempixel.com/380/325/" alt="" />
  </div>

</div>

Upvotes: 1

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

Two things are there because of which images are there

  1. In div1 image is in <p> tag and <p> tag has a default bottom margin u need to set it to 0 
.featured-sellers-collage .div1 p {
    top: 0;
    bottom: 0;
    float:left;
    width: 50%;
  margin-bottom:0;
}
  1. <img> is inline tag and you need to set display:block to <img> to remove space bottom of image
.featured-sellers-collage .div1 p img {

    width: 100%;
  display:block
}

Here is the working fiddle : https://jsfiddle.net/yudi/nenu9chm/

Upvotes: 1

Felix A J
Felix A J

Reputation: 6470

Remove margin from p tag

.featured-sellers-collage .div1 p {
 top: 0;
 bottom: 0;
 float:left;
 width: 50%;
    margin:0;
}

.featured-sellers-collage .div1 p img {
 width: 100%;
   display: block;
}

Upvotes: 2

Related Questions