Столбцы с перекрывающейся перекрывающейся, но не заполняющей шириной

Question

Я создаю компоновку из 5 столбцов с перекрытием друг с другом divs, чтобы сделать пространство размером 5 пикселей.

Я использую рамку для исправления неприятных проблем с заполнением.

Проблема: колонки просто не будут соответствовать ширине, из-за «хаков», которые я делаю с полями, чтобы перемещать div.

JSFiddle

CSS

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    text-align: center; 
} 
.grid:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.col-1-5, 
.col-2-5, 
.col-3-5, 
.col-4-5, 
.col-5-5 { 
    float: left; 
    margin-left: -5px; 
} 
.col-first { clear: left; margin-left: 0; } 

.col-1-5 { width: 240px; } 
.col-2-5 { width: 480px; } 
.col-3-5 { width: 720px; } 
.col-4-5 { width: 960px; } 
.col-5-5 { width: 1200px; } 

.module { 
    background: #f1ebe5; 
    padding: 5px; 
} 
.module-content { 
    background: #fff; 
    height: 320px; 
} 

.col-3-5 .module-content { /* Middle col has main content, thus higher */ 
    height: 400px; 
} 

HTML

<div class="grid"> 
    <div class="col-1-5 col-first module"> 
     <div class="module-content"> 
      240px x 320px 
     </div> 
    </div> 
    <div class="col-3-5 module"> 
     <div class="module-content"> 
     720px x 400px 
     </div> 
    </div> 
    <div class="col-1-5 module"> 
     <div class="module-content"> 
      240px x 320px 
     </div> 
    </div> 
</div> 

Удаление

margin-left: -5px; 

делает все, что соответствует ширине 1200 пикселей, но с 10px «границами» между столбцами вместо 5px.

Я уверен, что есть очень простое решение, одна из вещей, которые я уже пробовали это:

• Пользовательские обивка правом на первом или последнем столбце, чтобы установить недостающую ширину.

Но с содержанием, придающим колонны разной высоты, это не работает.

Это как конечный результат суждено быть:

Answer 1

Вот мое решение этой проблемы, которая вовлекает в общей ширине конструкции просто 5px шире. Совсем не оптимально, когда я собирался разработать дизайн шириной 1200 пикселей, но он исправляет проблему не выравнивания разных div при перекрытии друг друга.

JSFiddle

HTML

<div class="col-5-5 module top"> 
    <div class="module-content">1205px</div></div> 

<div class="grid"> 
    <div class="col-5-5"> 
     <div class="col-1-5 module col-first "> 
      <div class="module-content"> 
       245px x 320px 
      </div> 
     </div> 

     <div class="col-2-5 module main"> 
      <div class="module-content"> 
       585px x 400px 
      </div>   
     </div> 

     <div class="col-2-5 module col-last"> 
      <div class="module-content"> 
       585px x 500px 
      </div> 
     </div> 
    </div> 
</div> 

CSS

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

.grid:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.col-1-5 { width: 245px; } 
.col-2-5 { width: 485px; } 
.col-3-5 { width: 725px; } 
.col-4-5 { width: 965px; } 
.col-5-5 { width: 1205px; } 

.col-1-5, 
.col-2-5, 
.col-3-5, 
.col-4-5 { 
    float: left; 
    margin-left: -5px; 
} 
.col-first { 
    clear: left; 
    margin-left: 0; 
} 

.module { 
    background: #f1ebe5; 
    padding: 5px; 
} 
.module-content { 
    background: #fff; 
    height: 320px; 
} 

/* Random stuff to make this example worth something */ 
.top .module-content { height: 100px; } 
.top.module { padding-bottom: 0; } 
.main .module-content { height: 400px; } 
.col-last .module-content { height: 500px; }