Question

I have a container that is used to show a breadcrumb path through a series of documents as they are selected.

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.

What should happen:
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.

The problem:
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.

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.

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.

http://jsfiddle.net/MaxVK/drw9J/30/

Can anyone tell me what I am doing wrong please?

Many thanks

MVK

Answer 1

You have to subtract the padding, margins and border size (in your case : 9px, 2*3 for the padding, 2*1 for the border and 1 for the left margin) to the buttons width:

var Lok = (BredWid / ButCount)-9;

http://jsfiddle.net/drw9J/35/

Here is a simple example:

http://jsfiddle.net/drw9J/34/

You will notice that the total width is not exactly equal to the container width (there is a small blank after the buttons), this is due to the rounding of the width.

In the first example (your version), the blank at the end is due to the buttons that are smaller than Lok.