I know just enough CSS to be able to coble stuff together and get myself into the type of mess I'm in right now...

I'm working on the help files for a small project and they're intended to be read by Mac OS' Help Viewer which uses the same rendering engine as Safari (which I suppose is Web Kit built into the the OS).

I've created a navigation trail (like a breadcrumb trail or path) along the top of all my pages. It's put together with DIVs, Anchors and SPANs with the required style bits to get it to look the way I want. It works reasonably well except for one side effect I don't like....

If I shrink the window, the trail/path will wrap. I'd like the whole thing not to wrap and instead be occluded by the right window edge.

If anyone thinks they'd be able to take a look at the CSS/XHTML and give me some help, it'd be much appreciated. Currently the whole thing only renders this well in Help Viewer and Safari. Camino/Firefox/Mozilla make a mess of it and I don't know why (since the files aren't intended to be read in those browsers, I haven't bothered trying to make it work universally). So I think you'd have to have a Mac to be able to see the issue that I first mentioned.

This is what it looks like before it wraps:



The wrapped image after squeezing the window so it touches the last block/item: