Wie lässt man Grenzen (bei einem Div) kollabieren?

Angenommen, ich habe Markup wie:http://jsfiddle.net/R8eCr/1/

<div class="container">
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="column">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    ...
</div>

Dann CSS

.container {
    display: table;
    border-collapse: collapse;
}
.column {
    float: left;
    overflow: hidden;
    width: 120px;
}
.cell {
    display: table-cell;
    border: 1px solid red;
    width: 120px;
    height: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Ich habe die äußere div mitdisplay: table; border-collapse: collapse; und Zellen mitdisplay: table-cell warum kollabieren sie immer noch nicht? Was vermisse ich hier?

Übrigens gibt es vielleicht eine variable Anzahl von Zellen in einer Spalte, so dass ich nicht nur Ränder auf einer Seite haben kann.

Antworten auf die Frage(7)

Ihre Antwort auf die Frage