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;
}
<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>
there were numerous issues with both your html and your css
HTML
when attempting to have two divs floated next to each other, they need to be siblings in the html. Your .sleft2 was actually a child of .sleft1, and you forgot to close the </div> for .sleft1
CSS
there is no need to write separate styles for identical .flex-caption divs. You can combine them into one style if they should look the same.
IMPORTANT: Remember to float the containers .sleft1 and .sleft2, not the elements inside them! Remove any unnecessary floats from other elements and add
.sleft1,.sleft2 {
float:left;
width:50%;
}
add box-sizing:border-box to .flex-caption to prevent the width from exceeding 100% when using padding:2%
make some minor CSS adjustments
let me know if this resolves your issue