apply border-spacing to some cells

Question

I'm going crazy trying to get the following layout right:

• left div with fixed width (possibly multiple divs one beside another)
• center div with auto width (takes up remaining space)
• right div with fixed width (possibly multiple divs one beside another)
• a margin should exist between center div and first neighbor, be it left or right

HTML

<div class="container">
    <div class="all left">
        Left1
    </div>
    <div class="all left">
        Left2
    </div>
    <div class="all center">
        Center
    </div>
    <div class="all right">
        Right1
    </div>
    <div class="all right">
        Right2
    </div>
</div>

CSS

.container {
    display: table;
    position: relative;
    width: 100%;
    height: 100px;
    border-spacing: 5px;
}

.all {
    display: table-cell;
    border: 1px solid #333;
    margin: 5px;
}

.left {
    width: 45px;
}

.right {
    width: 45px;
}

.center {
    width: auto;
}

FIDDLE

http://jsfiddle.net/ozrentk/VdryG/3/

However, whatever I try (e.g. putting border-spacing: 0px in left or right div, margin: 0, border-collapsing) all of my margins end up the same.

To simplify it, I want this:

+--------------------------------------------------------------+
|+-----++-----+  +------------------------------++-----++-----+|
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
||     ||     |  |                              ||     ||     ||
|+-----++-----+  +------------------------------++-----++-----+|
+--------------------------------------------------------------+

But currently I have this:

+--------------------------------------------------------------+
|                                                              |
| +----+  +----+  +--------------------------+  +----+  +----+ |
| |    |  |    |  |                          |  |    |  |    | |
| |    |  |    |  |                          |  |    |  |    | |
| |    |  |    |  |                          |  |    |  |    | |
| |    |  |    |  |                          |  |    |  |    | |
| |    |  |    |  |                          |  |    |  |    | |
| |    |  |    |  |                          |  |    |  |    | |
| +----+  +----+  +--------------------------+  +----+  +----+ |
|                                                              |
+--------------------------------------------------------------+

How can I control individual margins in this layout?

P.S.

• I don't want the solution with mixing floats with non-floats, because it ends up with layout issues, see this
• I don't want the solution with css calc because it is experimental
• I don't want JS solution because I believe that CSS should be used for this kind of layout and can lead to flickers; also, user can have JS disabled

Answer 1

A CSS only solution using the original mark-up

table-cell display types do not recognize margins, so that is why setting left and right margins are not getting you the desired result.

One work around is to specify display: block on the .center element:

.container {
    display: table;
    width: 100%;
    height: 100px;
    border-spacing: 5px;
}

.all {
    display: table-cell;
    border: 1px solid #333;
}

.left {
    width: 45px;
}

.right {
    width: 45px;
}

.center {
    width: auto;
    display: block;
    margin: 0 10px 0 10px;
    border: 1px solid red;
    height: inherit;
}

Fiddle: http://jsfiddle.net/audetwebdesign/GNVfG/

The one limitation is that the parent block .container needs an explicit height so that all the .container child elements can inherit or compute the same height.

Thanks to Ilya Streltsyn for suggesting display: block which solved the margin problem.

Answer 2

Is this what you mean?

.center{
       margin-left: 10px;
    }

By adding a left or right margin to center you will get the unique gap you want

Answer 3

As a quick solution that doesn't need to change the whole layout model, you can just add an invisible separator to your table structure, like in this edited fiddle:

hr {
    display: table-cell;
    width: 10px;
    visibility: hidden;
}