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

Я пытаюсь следующее (обзор, ссылка jsfiddle включена ниже):

#colLeft {
  display: inline;
  float: left;
}
#colCenter {
  float: left;
  display: inline;
  overflow: none;
  white-space: nowrap;
}
#colRight {
  display: inline;
  float: right;
}

<div id="parent" style="width:100%">
  <div id="colLeft">left</div>
  <div id="colCenter">Some really long text in the center. Some really long text in the center.</div>
  <div id="colRight">right</div>
</div>

скрипка:http://jsfiddle.net/5kszQ/

но центральный столбец выдвигает правый столбец под ним, когда его содержимое слишком длинное. Мне бы хотелось, чтобы все три столбца были встроены, а центральный столбец уменьшался по мере необходимости. Вот что дает мне вышеизложенное:

вместо этого я хотел бы:

Спасибо за любую помощь