How do I display image flush with other images after a clear? - css

Question

I've included a screen shot of what I currently have and how I want it fixed here: http://i.imgur.com/urAI4UF.png
Here is the simplified HTML code for my project (I have 19 images that I'm building in a complex grid and so I'm only including the trouble images since the others are playing nice together):
<div class="wrapper">
<div class="images">
<div class="col col-1-3">
<div class="module" id="img-10">
<img src="img/pic_10.png">
</div>
</div>
<div class="col col-1-3 clear">
<div class="module" id="img-11">
<img src="img/pic_11.png">
</div>
</div>
<div class="col col-1-3">
<div class="module" id="img-12">
<img src="img/pic_12.png">
</div>
</div>
<div class="col col-1-3">
<div class="module" id="img-13">
<img src="img/pic_13.png">
</div>
</div>
</div><!--.images -->
</div><!--.wrapper -->
Img 11 has a clear so that it will tuck itself under image 10, but then I can't get img 12 and 13 to go level with image 10. If I don't do the clear on img-11, it will be side by side with img-10.
Here is my CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box:
}
.wrapper {
width: 1000px;
margin:0 auto;
}
.grid {
overflow: hidden;
}
.col{
float: left;
}
.col-1-5 {
width: 20%;
}
.col-1-3 {
width: 33.3333%;
}
.col-2-5 {
width: 40%;
}
.col-2-3 {
width: 66.6666%;
}
.col-3-5 {
width: 60%;
}
.module img {
width: 100%;
height: 100%;
padding: 3px;
}
#img-10 {
height: 194px;
width: 333.33px;
}
#img-11 {
height: 194px;
width: 333.33px;
}
#img-12,
#img-13 {
height: 388px;
width: 333.33px;
}
.clear {
clear: both;
}
UPDATE: I got help from a friend on a different site and using this code instead works:
<div class="col col-1-3">
<div class="module" id="img-10">
<img src="img/pic_10.png">
</div>
<div class="module" id="img-11">
<img src="img/pic_11.png">
</div>
</div>

Answer 1

UPDATE: I got help from a friend on a different site and using this code instead works:
<div class="col col-1-3">
<div class="module" id="img-10">
<img src="img/pic_10.png">
</div>
<div class="module" id="img-11">
<img src="img/pic_11.png">
</div>
</div>