CSS одно изображение из 5 не выровнено как остальные

У меня есть 4 меньших (320x312 px) изображений и одно большее прямоугольное изображение (541x602 px). Моя цель - разместить 2 меньших изображения на каждой стороне большего. 3 меньших места, которые мне нужны, но последний (нижний левый угол) совершенно неуместен, расположен ниже, чем нужно. Код точно такой же, и я не могу его поднять. Я создал иллюстрацию.

Демо здесь: http://jsfiddle.net/QWStS/

Мне нужно, чтобы фиолетовая фигура была под черным, и выровнялась с синим справа от нее.

это код:

HTML5

<div class="container">
     <div class="box-image">
         <img src="1.png">
     </div>

     <div class="box-image">
         <img src="3.png">
     </div>

     <div class="box-image">
         <img src="4.png">
     </div>

     <div class="box-image">
         <img src="5.png">
     </div>

     <div class="box-image">
         <img src="2.png">
     </div>
 </div>

CSS:

.container {
    padding-top: 20px;
    width: 1200px;
    margin:0 auto;
}

.container .box-image {
    float: left;
}