Columns with padding overlapping, but not filling width

Question

I'm creating a 5-column layout with divs overlapping each other, to make a 5px space between them.

I'm using border-box to fix annoying padding issues.

The problem: The columns simply won't fit the width, because of the "hacks" I'm doing with margins to move the divs around.

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>

Removing the

margin-left: -5px;

makes the whole thing fit the width of 1200px, but with 10px "borders" between the columns instead of 5px.

I'm sure there is a very simple solution, one of the things I've already tried is:

• Custom padding-right on first or last column to fix the missing width.

But with content giving the columns different heights this isn't working.

This is how the end-result is destined to be:

Answer 1

Here's my solution to the problem, which involves making to total width of the design just 5px wider. Not optimal at all when I was going for a 1200px wide design, but it fixes the issue of the different div's not aligning when overlapping each other.

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