Blog
Copyright © 2019 Jiri Kriz, www.nosco.ch

CSS Fill Remaining Width

Comments (0)
I show the CSS to fill the remaining width in a horizontal container.

Example

Fixed
left
Remaining
centered
Fixed
right

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

New Comment