Linked images not floating left - html

Question

I'm sure this is obvious but I can't figure it out. I want to create a grid of images like so:
[Image] [Image] | [ Big
[Image] [Image] | Image ]
I can do this fine with just images but the problem is that the images are nested inside links. So I'm trying to figure out how to make the links float left.
My HTML is:
<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;">
My CSS is:
.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;
}
The width of each col-md-6 is 585 px so they should fit together. .gallery is getting targeted correctly too, it's showing up in the code inspector. There's obviously something basic about floats that I'm not understanding.

Answer 1

If you're already using a grid framework (Bootstrap), why not take advantage of it. It's a little extra markup, but I think it achieves what you are looking for.
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<a href="img/1-1full.png" title="" data-gallery>
<img src="img/1-1.png" alt="" class="img-responsive">
</a>
</div>
<div class="col-md-6">
<a href="img/1-2full.png" title="" data-gallery>
<img src="img/1-2.png" alt="" class="img-responsive">
</a>
</div>
</div>
<div class="row">
<div class="col-md-6">
<a href="img/1-3full.png" title="" data-gallery>
<img src="img/1-3.png" alt="" class="img-responsive">
</a>
</div>
<div class="col-md-6">
<a href="img/1-4full.png" title="" data-gallery>
<img src="img/1-4.png" alt="" class="img-responsive">
</a>
</div>
</div>
</div>
<div class="col-md-6">
<a href="img/1-largefull.png" title="" data-gallery>
<img src="img/1-large.png" alt="" class="img-responsive">
</a>
</div>
</div>

Answer 2

Would this work for you? I have given two examples, seeing your layout. One with 4 a row and the other with 2 a row.
* {box-sizing: border-box;}
.half {width: 50%;}
.quat {width: 25%;}
.sz34 {width: 75%;}
.cols {float: left;}
img {width: 100%; height: 65px; display: block; border: 1px solid #ccc;}
.parent {overflow: hidden;}
.parent div {float: left;}
img.double-height {height: 130px;}
<div class="parent">
<div class="half">
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
<div class="quat"><img src="" alt="Image"></div>
</div>
<div class="half">
<img src="" alt="Image" class="double-height">
</div>
</div>
<hr />
<div class="parent">
<div class="half">
<div class="half"><img src="" alt="Image"></div>
<div class="half"><img src="" alt="Image"></div>
<div class="half"><img src="" alt="Image"></div>
<div class="half"><img src="" alt="Image"></div>
</div>
<div class="half">
<img src="" alt="Image" class="double-height">
</div>
</div>