Float right help

Floating a span within a list item

[Reflection]

OK my brain doesnt seem to be functioning today and I cant figure out this problem...

<ul>
<li><a href="#">Text here <span>sometext <img> </span></a></li>
<li><a href="#">Text here <span>sometext <img> </span></a></li>
<li><a href="#">Text here <span>sometext <img> </span></a></li>
<li><a href="#">Text here <span>sometext <img> </span></a></li>
<li><a href="#">Text here <span>sometext <img> </span></a></li>
</ul>

relevant css...

li {display:block;}
li a{display:block;}
li span{float:right;}

So what I want here is each list item to contain some text on the left with and img and more text floated to the right.

Text on left  Text and img floated right 
Text on left  Text and img floated right 
Text on left  Text and img floated right 

But what I get is the right floated text and image 'dropping down' a line instead remaining in the list item.

Text on left 
Text on left  Text and img floated right 
Text on left  Text and img floated right 
    Text and img floated right 

How do I keep the right floated text within the list item it belongs to?

Thanks

[MWpro]

Not sure if I read your post correctly, but I am reading it as you want it like this:
(_ = blank space)

Text on left________________________Text on right<img>

if this is what you want, try this CSS with your code.

span {
float: right;
}
li {
clear: right;
}

edit: i take that back, will post the right code in a few min

[Reflection]

Not sure if I read your post correctly, but I am reading it as you want it like this:

Yes thats what I want the <pre> style code doesnt seem to do what its supposed to :(

[MWpro]

The code that I posted before worked, but it left a small space between lines. Try this one.

css

img, span {
float: right;
}
li {
clear: right;
}

and the html

<ul>
<li><img src="img.gif" /><span>Right text</span>Left text</li>
<li><img src="img.gif" /><span>Right text</span>Left text</li>
<li><img src="img.gif" /><span>Right text</span>Left text</li>
<li><img src="img.gif" /><span>Right text</span>Left text</li>
<li><img src="img.gif" /><span>Right text</span>Left text</li>
<li><img src="img.gif" /><span>Right text</span>Left text</li>
</ul>

You can edit and put back your <a> tags in. Hope it helps.

[Reflection]

Of course thats it, forgot to have the right floated content first, I told you my brain wasnt functioning properly today :).

Thanks MWpro much appreciated.

[DrDoc]

Yes, that's the key. The floated element must come first.

Sure, you can always play with negative top margins, or relative positioning...

[marek]

Reflection, floated element must have explicit width. So either float the IMG only (it has intrinsic width, what is ok), or set the width to the SPANs.

[Reflection]

floated element must have explicit width

Are you sure about that? In order to have an explicit width the element would have to be block-level which would mean you could not float inline elements.

[DrDoc]

[w3.org...]

...assigned via the 'width' property, or its intrinsic width in the case of replaced elements...

[Reflection]

Then why can you float an inline element? Browsers not following w3c?

[marek]

I believe that floated elements are always treated as the block-level ones, even if their display property is inline.

[DrDoc]

I believe that floated elements are always treated as the block-level ones, even if their display property is inline.

Not quite... From the same page:

Any floated box becomes a block box that is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float.

So, they become 'block boxes [w3.org]'.

<DIV>
Some text
<P>More text</P>
</DIV>

"Some text" is likewise in an anonymous block box...