Is there an alternative to position: absolute inside inline position:relative?

Question

I've been working on this for a while, and just can't seem to figure it out.

I have a series of position: relative spans which are wrapped around some text and a position: absolute span set to right: 0;. I would expect the second span to be stuck to the right of the first span, even if the first span is broken onto two lines — but alas, I've only been able to get this to work in Safari.

To see an example, take a look here: http://workingonit.andrewleclair.com/slashtest/.

I found this page: http://www.brunildo.org/test/inline-cb.html which suggests that this technique, although technically correct, is not well-supported. What I'd like is for each / to be stuck to the end of each li even if it wraps to multiple lines..

Any ideas? Thanks.

Solution

It looks your header is too small. Try to remove the width. If i do so it looks fine in FF 3.6.

#header {
    float: left;
    margin-right: 48px;
    margin-top: 26px;
    /*width: 334px;*/
}

Another way is to add white-space: nowrap to your li.

li {
    color: #888888;
    list-style-type: none;
    white-space: nowrap;
}

Edit:

Try this instead...

.slash {
    color: #BBBBBB;
    padding: 0 2px 0 19px;
}

.header {
    background-color: yellow;
    border: 1px solid red;
}             

Comments

[Andrew LeClair]

Unfortunately, the header needs to have a width, so the tricky part is getting the li to wrap and also have the slash appear in the right position (i.e. just after the end of the text).

[gearsdigital]

See my update above... Now we have a consistent view in FF and Safari.