CSS Tip - Multiple elements sharing full width

Sometime you may want to have multiple divs inside a container sharing 100% width equally. This is especialy useful when you have dynamic number of divs which should equaly divide full width. This is where display:table comes handy. When you set the display property as table, it behaves like table. Here is an example:

If you remove any cell, the other two will expand to fill up the full width. Toggle Cell
Code:

<div class="table-container">
    <div class="cell">First cell</div>
    <div class="cell">Second cell</div>
    <div class="cell">Third cell</div>
</div>

<style>
.table-container {
    width:100%;
    display:table;
    table-layout:fixed;
    background:#f0f0f0;
    border:1px solid #bbb;
}
.table-container .cell {
    display: table-cell;
    border-right: 1px solid #C5C5C5;
    text-align: center;
    padding: 5px;
}
.table-container .cell:last-child {
    border-right:none;
}
</style>

Browser support

CSS table display is supported in all modern browsers and IE>7. So if you want to support IE7 you might need to write some fallback CSS for the same.