CSS Fill Remaining Width

Example

Resize the window to see the behavior.

The example can easily be generalized to several "columns". All columns but one have fixed width. One column has the width auto. This column has a variable width and fills the remaining width of the container.

The same approach can also be applied to columns of a table.

CSS

.container {
    display: table;
    width: 100%;
    margin-top: 30px;
}
.container div {
    display: table-cell;
}
.cell_1 {
    width: 80px;
    background-color: #F00;
    text-align: left;
    padding-left: 10px;
}
.cell_2 {
    width: auto;
    background-color: #0F0;
    text-align: center;
}
.cell_3 {
    width: 160px;
    background-color: #00F;
    text-align: right;
    padding-right: 10px;
}

HTML

<div class="container">
   <div class="cell_1">Fixed<br>left</div>
   <div class="cell_2">Remaining<br>centered</div>
   <div class="cell_3">Fixed<br>right</div>
</div>

Comments