Есть ли лучший способ выполнить эту, казалось бы, простую трехколоночную схему?

Чистый и отзывчивый. Чистый CSS. Не вмешиваться в свойство отображения.

<div id="layout">
       <div class='left'></div>
       <div class='right'></div>
       <div class='center'></div>
    </div>

    <style>
    .left {
    width: 20%;
    float:left;
    background: red;
    }
    .right {
    width: 20%;
    float:right;
    background:blue;
    }
    .center {
    margin:0 auto;
    width: 60%;
    background:green;
    }
    </style>

Скрипт: http://jsfiddle.net/N75Rn/

Мне нравится делать этот вид макета с position: absolute по элементам фиксированной ширины и значением padding для их родителя, равным их width.

Это имеет преимущество в RWD/SEO, поскольку порядок столбцов не имеет значения. Кроме того, содержимое гибкого элемента не будет просачиваться ниже элементов фиксированной ширины, когда гибкий элемент выше их, что может быть или не быть желательным в зависимости от вашего дизайна.

Недостатком этого является то, что элементы фиксированной ширины извлекаются из потока содержимого, то есть вам, возможно, придется каким-то образом компенсировать их высоту, если они выше гибкого элемента, и если это нарушает макет.

Пример:

HTML:

<div class="row">
  <div class="column fixed fixed-left"></div>
  <div class="column flexible"></div>
  <div class="column fixed fixed-right"></div>
</div>

CSS:

.row { padding: 0 150px; }

.fixed {
  position: absolute;
  top: 0;
  width: 150px;
}

.fixed-left  { left: 0; }
.fixed-right { right: 0; }

Вот ручка с этим.

Как вы заметили, вы можете использовать display:table

вариант 1: дисплей: таблица

Демо-скрипт

HTML

<div class='table'>
    <div class='cell'>fit content</div>
    <div class='cell'>expand content</div>
    <div class='cell'>fit content</div>
</div>

CSS

.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
    width:1%;
    border:1px solid black;
    height:10px;
}
.cell:nth-child(2) {
    width:100%;
}

вариант 2: плавает

.... или, вы можете использовать поплавки

Демо-скрипт

HTML

<div></div>
<div></div>
<div></div>

CSS

div {

    border:1px solid black;

    height:10px;

}

div:nth-child(1) {

    float:left;

    width:40px;

}

div:nth-child(2) {

    float:right;

    width:40px;

}

div:nth-child(3) {

    overflow:hidden;

}