Dynamic widths for breadcrumbs

Question

I'm kinda stuck here and I'm looking for some ideas. I have a breadcrumb system which uses :before and :after tags for the arrows.

The maximum width for all the breadcrumbs put together is 735px as that is the size of the container element.

Now; I need to restrict the length of each breadcrumb to stop them overflowing and to ensure that they all stay on one line. To do this, I will need to set a maximum width on the breadcrumb. However the max-width will depend on the number of breadcrumbs which are currently visible.

I know that the easiest way would be to count the number of breadcrumbs present and set a fixed position by dividing the container width by the number of breadcrumbs, but this is not what I want - It would mean that breadcrumbs with a shorter title have a large gap, like below.

So I need to specify a max-width, but the max-width will depend on the width of the other breadcrumbs.

For example, if all the breadcrumbs have a fairly long title, the max-width will need to be small enough to allow all breadcrumbs to fit in the container.

But if, say, five of the breadcrumbs have very short titles (ie 4 characters) and the fifth one has a longer title, I would want the max-width to allow all the text on the last breadcrumb to be displayed, but still ensuring that the breadcrumbs still fit inside the container.

Sorry if this is too confusing. Here's a jsFiddle of my breadcrumbs so you can understand how they're structured. If you need any more information please let me know.

http://jsfiddle.net/5CLYt/

The second example in the jsFiddle shows how the max-width needs to be dependant on the width of the other breadcrumbs, and not just the number of the breadcrumbs displayed.

Answer 1

Beside the answer of @JAYBEkster, you could consider using flexbox. Here is a great resource: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

I've updated your fidle: http://jsfiddle.net/NicoO/5CLYt/1/

/*

COPIED FROM: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

*/

#container {
    display: flex;
    justify-content: space-around;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

I know this is not what you want, since the space between the items is growing and not the items it self. But maybe it' the right direction.

Maybe keep this question updated.

Update 2: flexbox is awesome. It works with firefox: http://jsfiddle.net/NicoO/5CLYt/3/

All you needed to do was:

.breadcrumbButton
{
    flex: 1 1 auto;
}

Answer 2

You should add display:table for your container; add display:table-cell for each child and remove floating;