CSS: Simulating flexible width (without min-width)-

Question

I have a DIV container of 100% width holding x divs. The last child DIV floats right, the rest float left. All child DIV's remain in a line so long as they fit in the bar (all oriented left, except for the last div which sits by itself on the right). If the window is resized smaller and the children don't have enough room, they collapse from their horizontal orientation (which I don't want). To fix this, I know I can set a min-width of the DIV container, the issue is that there is a variable amount of DIVs in the container, of variable width. I'd like to simulate being able to set a min-width where of the container where min-width = width of all children, but I cannot compute these because they are variable (which would simulate flexible space between the right div and the rest, but not let them get closer than they should be allowed (hence collapsing the divs)).

I know this is a little unclear so here's a picture:

Thanks!

Answer 1

I hate to say it (or rather the anti-table crowd will hate it) but you know what does this pretty easily?

That's right: tables.

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

The internal divs are important because overflow hidden only works on block elements and table cells aren't block elements (they're "table-cell" display type).