CSS Columns

CSS columns with display:table

by agrimsrud

HTML

<div>
    <div>Kolonne 1</div>
    <div>Kolonne 2</div>
    <div>
        Kolonne 3<br />
        Denne kolonnen har mer innhold enn de andre, men de skal fortsatt ha samme høyde
    </div>
</div>

CSS

div {
    display:table;
    table-layout:fixed;
}
div div {
    display:table-cell;
    width:100px;
}
div div:nth-child(2) {
    width:400px;
}

/* Kun for å illustrere */
div:nth-child(1) { background:#a31 }
div:nth-child(2) { background:#aa1 }
div:nth-child(3) { background:#3a1 }