Estoy tratando de hacer un diseño de tres columnas. Me gustaría que el ancho de las columnas izquierda y derecha fuera tan ancho como el contenido de sus hijos. Me gustaría que la columna central se expanda para llenar el espacio restante.

Estoy intentando lo siguiente (descripción general, enlace jsfiddle incluido a continuación):

#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>

violín:http://jsfiddle.net/5kszQ/

pero la columna central empuja la columna derecha debajo de ella cuando su contenido es demasiado largo. Me gustaría que las tres columnas estuvieran en línea y que la columna central se reduzca según sea necesario. Esto es lo que me da lo anterior:

en cambio me gustaría:

Gracias por cualquier ayuda