I have some float:left divs inside a CSS3 column layout. The divs don't always respect the column-width property. See example: <http://jsfiddle.net/upzkeLxc/>

HTML:

```
<div class='container'>
    <div class='content w1 h1 c1'><span>One</span></div>
    <div class='content w3 h3 c2'><span>Two</span></div>
    <div class='content w3 h3 c3'><span>Three</span></div>
    <div class='content w3 h3 c4'><span>Four</span></div>
    <div class='content w1 h3 c5'><span>Five</span></div>
    <div class='content w2 h2 c6'><span>Six</span></div>
    <div class='content w2 h2 c7'><span>Seven</span></div>
    <div class='content w2 h2 c8'><span>Eight</span></div>
</div>

```

CSS:

```
.c1 { background-color: red; }
.c2 { background-color: green; }
.c3 { background-color: blue; }
.c4 { background-color: yellow; }
.c5 { background-color: magenta; }
.c6 { background-color: cyan; }
.c7 { background-color: wheat; }
.c8 { background-color: rose; }

.w1 { width: 240px; }
.w2 { width: 120px; }
.w3 { width: 80px; }

.h1 { height: 240px; }
.h2 { height: 120px; }
.h3 { height: 80px; }

.container, .content {
    padding:0; margin:0;
}

.container {
    -webkit-column-width: 240px;
    -moz-column-width: 240px;
    column-width: 240px;
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;

}

.content {
    float: left;
    display: flex;
    align-content:center;
    align-items: center;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
}

```

Here is a screenshot of the results on Google Chrome (at a certain width): 

![Floating divs inside CSS column layout](https://i.stack.imgur.com/QNBZc.png)

The column width **should** be the width of the red 'One' square, but 'Two', 'Three', 'Four' end up alongside, where I thought they should be below.

Does anyone have any ideas of CSS magic that will make those boxes respect the column widths?