2 divs aligned side by side, how to make right div fill width 100%?

Question

I haven’t really seen a good solution in the answers here. So I’ll share mine.

Best way to do this is by using the table-cell option in CSS. One important thing to add is a ‘min-width’ to the element that has a pixel width.

Example:

<div id="left">
    Left
</div>
<div id="right">
    right
</div>

CSS:

#left {
    display: table-cell;
    min-width: 160px;
}
#right {
    display: table-cell;
    width: 100%;
    vertical-align: top;
}