Jak sprawić, aby obramowanie było zwinięte (na div)?

Załóżmy, że mam znaczniki takie jak: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>

Następnie 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;
}

Mam zewnętrzny div zdisplay: table; border-collapse: collapse; i komórki zdisplay: table-cell dlaczego wciąż się nie zawalają? Czego mi tu brakuje?

Swoją drogą może być zmienna liczba komórek w kolumnie, więc nie mogę mieć tylko granic po jednej stronie.

questionAnswers(7)

yourAnswerToTheQuestion