Левые плавающие divs не укладываются правильно

Question

Я пытаюсь собрать 4 divs в большой прямоугольник. Его разбиты на двойные широкие и одиночные широкие divs с одним широким, вдвое меньшим размера. Первые два дивизиона плавали безупречно. Однако я хочу, чтобы следующие два были отменены, поэтому, когда пользователь видит это, они видят двойной, одиночный, одиночный, двойной.

В этом случае проблема начинается, сингл придерживается правой стороны без видимых причин. Если я положил его после двойника, он снова работает, но это действительно против того, что я пытаюсь сделать. Я не верю, что это тоже вопрос интервала, я убедился, что у них есть место, чтобы соответствовать друг другу или, по крайней мере, я полагаю, что у меня есть.

Вот Fiddle

<div id="hold-grid"> 
    <div class="doubleWide"> 
    <img src="http://www.placehold.it/677x349" alt="" /> 
    <div class="grid clear"> 
     <div class="doubleCell"></div> 
     <div class="doubleCell"></div> 
     <div class="doubleCell"></div> 
     <div class="doubleCell"></div> 
    </div> 
    </div> 
    <div class="singleWide"> 
    <img src="http://www.placehold.it/339x349" alt="" /> 
    <div class="grid clear"> 
     <div class="singleCell"></div> 
     <div class="singleCell"></div> 
    </div> 
    </div> 
    <div class="singleWide"> 
    <img src="http://www.placehold.it/339x349" alt="" /> 
    <div class="grid clear"> 
     <div class="singleCell"></div> 
     <div class="singleCell"></div> 
    </div> 
    </div> 
    <div class="doubleWide"> 
    <img src="http://www.placehold.it/677x349" alt="" /> 
    <div class="grid clear"> 
     <div class="doubleCell"></div> 
     <div class="doubleCell"></div> 
     <div class="doubleCell"></div> 
     <div class="doubleCell"></div> 
    </div> 
    </div> 
</div> 


* { 
    margin: 0; 
    padding: 0; 
} 
.clear:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 
#hold-grid { 
    width: 60%; 
} 
img { 
    display: block; 
    width: 100%; 
} 
.doubleWide { 
    width: 66.666%; 
} 
.singleWide { 
    width: 33.333%; 
} 
.doubleWide, .singleWide { 
    float: left; 
    position: relative; 
} 
.grid { 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: 3; 
} 
.grid .singleCell, .grid .doubleCell { 
    background-color: rgba(0, 0, 255, 0.5); 
    float: left; 
} 
.grid .singleCell { 
    padding-top: 51.4%; 
    width: 100%; 
} 
.grid .doubleCell { 
    padding-top: 25.7%; 
    width: 50%; 
} 

Answer 1

Добавить div с clear класса после второго #singleWide

<div class="clear"></div> 

Fiddle here