CSS: имитация гибкой ширины (без минимальной ширины) -

У меня есть контейнер DIV шириной 100%, содержащий x div. Последний дочерний элемент DIV перемещается вправо, остальные - влево. Все дочерние DIV остаются в строке до тех пор, пока они помещаются в полосу (все ориентированы влево, за исключением последнего div, который находится сам по себе справа). Если размер окна уменьшен и детям не хватает места, они смещаются с горизонтальной ориентации (чего я не хочу). Чтобы исправить это, я знаю, что могу установить минимальную ширину контейнера DIV, проблема в том, что в контейнере есть переменное количество DIV переменной ширины. Я хотел бы смоделировать возможность установить минимальную ширину контейнера, где min-width = ширина всех дочерних элементов, но я не могу вычислить их, потому что они являются переменными (что имитирует гибкое пространство между правым div и остальными ,

Я знаю, что это немного непонятно, поэтому вот картинка: http://img3.imageshack.us/img3/933/barfuo.jpg

Спасибо!

Ответов (1)

Решение

Ненавижу это говорить (вернее, толпа противников столов возненавидит это), но знаете, что это делает довольно легко?

Правильно: столы.

<style type="text/css">
#topbar { width: 100%; }
#topbar div { white-space: nowrap; overflow: hidden; }
#topright div { text-align: right; }
</style>
<table id="topbar">
<tr>
  <td><div>Item 1</div></td>
  <td><div>Item 2</div></td>
  <td><div>Item 3</div></td>
  <td><div>Item 4</div></td>
  <td><div>Item 1</div></td>
  <td id="topright"><div>Item Right</div></td>
</tr>
</table>

Внутренние блоки div важны, потому что скрытое переполнение работает только с блочными элементами, а ячейки таблицы не являются блочными элементами (это тип отображения «таблица-ячейка»).