왼쪽 부동 div가 올바르게 스택되지 않음

4 div를 큰 직사각형에 쌓으려고합니다. 단일 너비는 이중 크기의 절반 인 이중 너비와 단일 너비 div로 나뉩니다. 처음 두 div는 완벽하게 떠 올랐습니다. 그러나 나는 다음 두 개가 반전되기를 원하므로 사용자가 볼 때 이중, 단일, 단일, 이중으로 표시됩니다.

이것이 문제가 시작되는 곳이고, 싱글은 명백한 이유없이 오른쪽에 붙어 있습니다. 두 배 뒤에 넣으면 다시 작동하지만 그것은 내가하려는 일에 정말로 반대입니다. 나는 그것이 간격의 문제라고 믿지 않는다. 나는 그들이 서로 나란히 맞을 공간이 있는지 확인했거나 적어도 내가 가지고 있다고 믿는다.

여기에 바이올린이 있습니다

<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%;
}