Próbuję stworzyć układ trójkolumnowy. Chciałbym, aby szerokość lewej i prawej kolumny była tak szeroka, jak zawartość ich dzieci. Chciałbym, aby środkowa kolumna rozwinęła się, aby wypełnić pozostałą przestrzeń.

Próbuję wykonać następujące czynności (przegląd, link jsfiddle poniżej):

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

skrzypce:http://jsfiddle.net/5kszQ/

ale środkowa kolumna przesuwa prawą kolumnę pod nią, gdy jej zawartość jest zbyt długa. Chciałbym, aby wszystkie trzy kolumny były wbudowane, a kolumna środkowa zmniejszała się w miarę potrzeb. To właśnie daje mi powyższe:

zamiast tego chciałbym:

Dzięki za pomoc