CSS Table Cells

Experiments with display:table

by toubia95

HTML

<div id="container">
    <header>HEADER</header>
    <div id="main">
    <nav></nav><div id="content">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div><aside></aside>
    </div>
    <footer>FOOTER</footer>
</div>

CSS

#container {
    width: 600px;
}
header, footer {
    display: block;
    background: #ddd;
    padding: 10px;
}

#main {
    display: table;
    width: 100%;
}
nav, #content, aside {
    display: table-cell;
    padding: 10px;
}

nav, aside {
    background: #eee;
}

nav {
    width: 70px;
}

aside {
    width: 130px;
    empty-cells: show; /*hide*/
}