In CSS, why does the combination of "float: left; display:table; margin: x" on multiple elements make the margins decrease?

Question

In working on a layout, I decided to try combining a float-based layout for the major columns with a table-based layout for the sub-elements. Thus, my html/css markup was along these lines:

HTML:

<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
...

CSS:

.column {
    float: left;
    display: table;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element {
    display: table-cell;
    /*  ...  */
}

The specific widths and margins aren't critical. See this jsFiddle for a reference example.

What I saw happening was that each column block, going left to right across the page, had slightly smaller margins than the last. Since no additional markup or CSS was present to make this happen, I was confused. After playing around with different values, I discovered that commenting out display: table caused the normal behavior I was expecting, e.g. constant column widths.

Now, I can use alternative methods to get the layout I want, that's not a problem; but I am really curious why this is happening. Any thoughts?

EDIT

It looks like this is a webkit bug. display: table with float and margins works fine in Firefox. Any suggestions on a fix for webkit for posterity?

Further EDIT

I just tested in Safari and it seems to work there as well. WTF Chrome??

Final EDIT

After testing in Firefox 18, Safari, and Chrome Canary (in addition to standard Chrome), it appears that this is in fact a Chrome-specific bug.

The easiest fix is to add a simple additional wrapper div inside each of the ones being floated to contain the content and set the wrappers' CSS to width: 100%; height:100%; display: table;, then remove the display: table from the outer elements being floated. Works like a charm.

http://jsfiddle.net/XMXuc/8/

HTML:

<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>
<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>
...

CSS:

.column {
    float: left;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element-wrapper {
    width: 100%;
    height: 100%;
    display: table;
}
.sub-element {
    display: table-cell;
    /*  ...  */
}

Answer 1

This should not happen. Horizontal margins on block-level tables should be calculated in the same way as with any other block-level non-replaced elements, as described in section 10.3.3 of the CSS2.1 spec, regardless of which table layout algorithm is used. In particular, percentages values for margins should be calculated based on the width of the containing block of the element that you're displaying as a table; since all your elements are siblings that share the same parent and the same margin percentage value, they should be equidistant as long as they are floating block boxes.

In all browsers except Google Chrome, the elements are equidistant, as expected. So my best guess is that this is another Chrome bug.

If you comment out the display: table declaration — which as you say causes the behavior to return to normal — browsers will still generate anonymous block table boxes within your floats to contain the table cells. This should not adversely affect the layout, but if it does, I can't comment further as I'm not intimately familiar with how table layout works in terms of CSS.