Positioning text to the left and the right in one line

[Sven Rudolph]

Hello list,

I'm trying to create a list of items with price tags.
The visual appearance I want to achieve is that the description should be
aligned to the left, wether the price should be aligned to the right.

This ist the HTML code I used:

<div id="test">
<ul>
<li>Item, with description <strong>0.99$ </strong></li>
<li>Item, with deption <strong>1.20$ </strong></li>
<li>Item, on <strong>1.99$ </strong></li>
</ul>
</div>


These are the sytyle definitions I used:

#test { margin-bottom:1em; }
#test ul {
width:auto;
margin:0;
padding:0;
}
#test ul li {
width:auto;
list-style:none;
border:1px dashed #44f;
margin-bottom:0.5em;
}
#test ul li strong {
width:5em;
text-align:right;
float:right;
border:1px dashed #f44;
}


You can see an example page here:

http://www.sven-rudolph.de/test/test

I tested this page with Konqueror-3.4, FireFox-1.0.4 (Linux), Opera-8.0
(Linux), IE6.
Unfortunately this doesn't work the way I want it to in some of them.


Konqueror and Opera seem to share my opinion on how this page should look
like (see the Screenshots):
http://www.sven-rudolph.de/test/pt-konqueror-3.4.png (6kB)
http://www.sven-rudolph.de/test/pt-opera-8.0.png (5kB)

IE6 puts the price to the next line (see the Screenshot):
http://www.sven-rudolph.de/test/pt-ie6.png (8kB)

Firefox has a completely different opinion (see the Screenshot):
http://www.sven-rudolph.de/test/pt-firefox-1.0.4.png (6kB)


Firefox is the browser I trust the most, but in this case I'm absolutely not
sure which browser is right and which one is wrong. Konqueror and Opera
display the lines the way I want them to. IE6 and Firefox don't.
What I need is a solution that looks the same in all of them.

http://validator.w3.org/ and
http://jigsaw.w3.org/css-validator/validator-uri.html don't complain about
the code.


Sorry if this is a FAQ.
I'm quite certain that this has allready been solved by someone and that I'm
not far from the solution, but at this moment I'm out of ideas.


Can anybody help me with this?



Thanks in advance
Sven Rudolph

[Spartanicus]

Re: Positioning text to the left and the right in one line

Sven Rudolph <news@sven-rudolph.de> wrote:
[color=blue]
>I'm trying to create a list of items with price tags.[/color]

That's tabular data, not a list.
[color=blue]
>The visual appearance I want to achieve is that the description should be
>aligned to the left, wether the price should be aligned to the right.[/color]

Easy when you use the appropriate markup.

--
Spartanicus

[Sven Rudolph]

Re: Positioning text to the left and the right in one line

Spartanicus wrote:
[color=blue]
> Sven Rudolph <news@sven-rudolph.de> wrote:
>[color=green]
>>I'm trying to create a list of items with price tags.[/color]
>
> That's tabular data, not a list.[/color]

That's definitely a good point :-)
I was so focused on the style definitions, that i forgot to think about the
markup.

[color=blue][color=green]
>>The visual appearance I want to achieve is that the description should be
>>aligned to the left, wether the price should be aligned to the right.[/color]
>
> Easy when you use the appropriate markup.[/color]

ACK
But I'm still interested if and how it is possible to do it with my
approach.


Thanks a lot!
Sven Rudolph

[Spartanicus]

Re: Positioning text to the left and the right in one line

Sven Rudolph <news@sven-rudolph.de> wrote:
[color=blue][color=green][color=darkred]
>>>The visual appearance I want to achieve is that the description should be
>>>aligned to the left, wether the price should be aligned to the right.[/color]
>>
>> Easy when you use the appropriate markup.[/color]
>
>ACK
>But I'm still interested if and how it is possible to do it with my
>approach.[/color]

http://www.spartanicus.utvinternet.ie/left_and_right_alignment_using_css.htm

--
Spartanicus