Mister Babu Mister Babu - 4 months ago 7
CSS Question

There is a gap, and I want my image to go there

I want to place my image in a gap, but I failed, here is the jsfiddle. As you can see, the right image and the overlay are not being placed as it should. I want them to be right in the gap from above.

HTML Code:

<div class = "leftpart fadeInBlock">
<a href="http://www.google.com">
<img src="images/test.jpg"/>
<div class="flex-caption hvr-fade">Adventurer Lemon</div>
</a>
<div class = "sleft1">
<a href="http://www.google.com">
<img src="images/test.jpg">
<div class="flex-caption hvr-fade">Adventurer Lemon</div>
</a>
<div class = "sleft2">
<a href="http://www.google.com">
<img src="images/test.jpg">
<div class="flex-caption hvr-fade">Adventurer Lemon</div>
</a>
</div>
</div>
</div>

Answer

see snippet

.leftpart {
  width: 43%;
  margin-top: 0.7%;
  float: right;
}

.sleft1,.sleft2 {
  float:left;
  width:50%;
}

.leftpart a img {
  width: 100%;
  height: 130px;
  display:block;
}

.leftpart .sleft1 a img {
  
  display:block;
  background-color:blue;
  margin-top:4.5%;
}

.sleft2 a img {
  display:block;

  margin-top:4.5%;
  background-color:red
}


.flex-caption {
  width: 96%;
  padding: 2%;
  top: 0px;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  position: relative;
  line-height: 18px;
  box-sizing: border-box;
}

.flex-caption {
  width: 100%;
  padding: 2%;
  top: 0px;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
  position: relative;
  line-height: 18px;
}
<div class = "leftpart fadeInBlock">	
					<a href="http://www.google.com">
						<img src="images/test.jpg"/>
						<div class="flex-caption hvr-fade">Adventurer Lemon</div>
					</a>
					<div class = "sleft1">
						<a href="http://www.google.com">
							<img src="images/test.jpg">
							<div class="flex-caption hvr-fade">Adventurer Lemon</div>
						</a>
            </div>
						<div class = "sleft2">
							<a href="http://www.google.com">
								<img src="images/test.jpg">
								<div class="flex-caption hvr-fade">Adventurer Lemon</div>
							</a>
						</div>
					</div>
				</div>

you had a bunch of problems both with your html and your css

HTML

if you want 2 divs to float next to each other you need to place them in html as siblings. your .sleft2 was a child of .sleft1 . you forgot to close the </div> for .sleft1

CSS

no need to write 2 different but the same styles for the .flex-caption divs. you can write only one style for both ( if you want them the same )

IMPORTANT you need to float the two containers .sleft1 , .sleft2 not the elements inside them ! so remove all the floats from other elements and add

 .sleft1,.sleft2 {
   float:left;
   width:50%;
 }

add box-sizing:border-box on the .flex-caption because if you don't, by using padding:2% the width of the .flex-caption exceeds 100%

+a few minor css changes

let me know if it helps

Comments