I'm really struggling with this issue that seems so simple. I am trying to create a grid layout of images like the following:
[Image] [Image] | [ Big
[Image] [Image] | Image ]
Creating the grid with just images is not difficult for me, but the problem arises when I nest the images inside links. I can't seem to figure out how to make the links float left.
This is the HTML code I am using:
<div class="row">
<div class="col-md-6">
<a href="img/1-1full.png" title="" data-gallery>
<img src="img/1-1.png" alt="">
</a>
<a href="img/1-2full.png" title="" data-gallery>
<img src="img/1-2.png" alt="">
</a>
<a href="img/1-3full.png" title="" data-gallery>
<img src="img/1-3.png" alt="">
</a>
<a href="img/1-4full.png" title="" data-gallery>
<img src="img/1-4.png" alt="">
</a>
</div>
<div class="col-md-6">
<a href="img/1-largefull.png" title="" data-gallery>
<img src="img/1-large.png" alt="">
</a>
</div>
</div>
<div style="clear: both;">
And here is my CSS code:
.gallery .col-md-6 a {
float: left;
display: block;
}
.gallery .col-md-6 a:nth-child(odd) {
width: 307px;
margin: 0 30px 30px 0;
}
.gallery .col-md-6 a:nth-child(even) {
width: 278px;
margin: 0;
}
Each col-md-6 element has a width of 585px which should fit together perfectly. The .gallery class is being targeted correctly as well, as confirmed through the code inspector. There must be some fundamental aspect of floating elements that I am missing here.