Resizing Elements to fit their container
<p>I have a container that is used to show a breadcrumb path through a series of documents as they are selected. </p>

<p>Each breadcrumb element is a single div, floated to the left so that they stack up nicely behind one another. Their width is set by their text content, which is the title of a document. Lengths will vary greatly.</p>

<p><strong>What should happen:</strong>
When the breadcrumb list of elements becomes too long to be displayed in the container they should resize, ensuring that all of them remain visible within the container.</p>

<p><strong>The problem:</strong>
This seems to work, but only up to a point. Once the list of breadcrumbs become too long for the container I divide the container width by the number of breadcrumb elements that exist, and set the elements widths accordingly.
However, this will not work consistently, sometimes showing the last document in the list, but refusing to show its direct parent if selected.</p>

<p>Ideally the breadcrumb elements should simply keep shrinking to make sure they are all displayed, in much the same way as window icons are sized to display in the windows taskbar.</p>

<p>Iv made a little fiddle to highlight roughly what is going on, and even here you can see that the elements are not resizing correctly to make sure they are all displayed. This is most obvious as 8 or more elements are added.</p>

<p><a href="http://jsfiddle.net/MaxVK/drw9J/30/" rel="nofollow">http://jsfiddle.net/MaxVK/drw9J/30/</a></p>

<p>Can anyone tell me what I am doing wrong please?</p>

<p>Many thanks</p>

<p>MVK</p>
