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.

Answer 1

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;
}