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:

First cell
Second cell
Third cell

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

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

.table-container {
    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 {

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.

Tags : tipscss
blog comments powered by Disqus