page wide bread crumb bar as at apple.com/store

Question

I want to build a (don't know what to call it other than) bread crumb bar at the top of the page, kinda like at http://store.apple.com/us/browse/home/shop_mac/software, y'know, at the top of the page, the horizontal, light grey bar that looks like so

[home icon] | Shop Mac | Mac Software                     Help | Account | Cart

Actually, I've got that bar working, with a curved, square left edge, the intermediate chevrons, and the curved, square right edge. So, my bar looks like so

[ Home > Foo > Bar > Baz ]

I have little graphics fragments that make up the [ and the > and the ] and the middle parts. The only problem is, I want the right edge to be at the right edge of my page. So, the above bar should look like so

[ Home > Foo > Bar > Baz                                                      ]

I want to have a variable number of entries in my bread crumb bar... so, I could have "Home, Foo, Bar, Baz" or I could have "Home, Foo" or "Home, Foo, Bar, Baz, Qux" and so on. In other words, I want the right edge of my bar to be dynamically long enough to extend to the edge of my web page.

Suggestions?

Answer 1

I would try placing your breadcrumb elements other than the closing bracket into a div (or span), and floating that element to the left within an outer container. Place the closing bracket into an element floated to the right. The "outer container" would be some sort of div set to your desired width by size or percentage, and positioned according to the needs of your layout.

There are other ways to achieve your desired effect, but this should give you one approach as a starting point.