lining up text without tables

V

Veronika

I would like to know how to line a text without using tables to look like
this:
I use <span style="padding-left:10px"> to indent the second line (where
required), but how can I line up the right hand side to be right justified??

Energy 23 Cal, 100 kj
Protein/Proteines 0.4g
Fat/Matieres grasses 0g
Polyunsaturates/Polyinsatures 0g
Monounsaturates/Monoinsatures 0g
Saturates/Satures 0g
Cholesterol/Cholesterol 0mg
Carbohydrates/Glucides 5.4g
Dietary fibre/Fibres alimentaires 2.4g
Sodium 54mg Potassium 195mg

Tx
 
G

Guest

Try this

<div style="float: left; z-index: 1">
Energy 23 Cal,<br>
Protein/Proteines<br>
Fat/Matieres grasses<br>
Polyunsaturates/Polyinsatures<br>
Monounsaturates/Monoinsatures<br>
Saturates/Satures<br>
Cholesterol/Cholesterol<br>
Carbohydrates/Glucides<br>
Dietary fibre/Fibres alimentaires<br>
Sodium 54mg Potassium
</div>

<div style="float:left; margin-left: 50px; text-align: right">
100 kj<br>
0.4g<br>
0g<br>
0g<br>
0g<br>
0g<br>
0mg<br>
5.4g<br>
2.4g<br>
195mg

</div>
 
R

Ronx

This is what tables were invented for - tabular data. I would use a
three column table.
Why do you not wish to use a table?
 
V

Veronika

How do "I turn it off??" so I can continue typing text under - left hand
side paragraph etc..
Currently the text will show up just to the right of the first line!!
 
V

Veronika

I am moving an e-commerce site that was developed 9 years ago with
StoreFront and FP to ZenCart version of a shopping cart. Tables are giving
difficulties there so do &nbsp;&nbsp; which are being taken out and replaced
with "blank space"..
 
T

Ted

Just press enter to move the cursor down.

If you don´t want to use tables the best way is to conntinue building the
site with CSS (stylesheet) otherwise you probably will have problems with
the layout in different browsers.
 
M

Murray

<div style="float: left;width:250px;">
Energy 23 Cal,<br>
Protein/Proteines<br>
Fat/Matieres grasses<br>
Polyunsaturates/Polyinsatures<br>
Monounsaturates/Monoinsatures<br>
Saturates/Satures<br>
Cholesterol/Cholesterol<br>
Carbohydrates/Glucides<br>
Dietary fibre/Fibres alimentaires<br>
Sodium 54mg Potassium
</div>

<div style="float:left; margin-left: 50px; text-align: right">
100 kj<br>
0.4g<br>
0g<br>
0g<br>
0g<br>
0g<br>
0mg<br>
5.4g<br>
2.4g<br>
195mg

</div>

No need for z-index. It would have no effect anyhow.
 
V

Veronika

that what I did.. and this is the result..
Code:
<div style="float: left; z-index: 1">
Energy 23 Cal,<br>
Protein/Proteines<br>
Fat/Matieres grasses<br>
<span style="padding-left:10px">Polyunsaturates/Polyinsatures</span><br>
<span style="padding-left:10px">Monounsaturates/Monoinsatures</span><br>
<span style="padding-left:10px">Saturates/Satures</span><br>
<span style="padding-left:10px">Cholesterol/Cholesterol</span><br>
Carbohydrates/Glucides<br>
<span style="padding-left:10px"> Dietary fibre/Fibres
alimentaires</span><br>
Sodium 54mg Potassium
</div>

<div style="float:left; margin-left: 50px; text-align: right">
100 kj<br>
0.4g<br>
0g<br>
0g<br>
0g<br>
0g<br>
0mg<br>
5.4g<br>
2.4g<br>
195mg
</div>
<p>THis is next line</p>
<p>tttttttt</p>

Result:

Energy 23 Cal,
Protein/Proteines
Fat/Matieres grasses
Polyunsaturates/Polyinsatures
Monounsaturates/Monoinsatures
Saturates/Satures
Cholesterol/Cholesterol
Carbohydrates/Glucides
Dietary fibre/Fibres alimentaires
Sodium 54mg Potassium 100 kj
0.4g
0g
0g
0g
0g
0mg
5.4g
2.4g
195mgTHis is next line

tttttttt







In EI6.0 and Forefox
 
V

Veronika

actually this does not show the output correctly!! Where you see it in red, that's where it shows up! I did copy & paste, obviously that does not "show" exactly what I see on the screen....
 
T

Ted

This is not what I said, remove the spantags, just write the code as I told you
"Veronika" <[email protected]> skrev i meddelandet actually this does not show the output correctly!! Where you see it in red, that's where it shows up! I did copy & paste, obviously that does not "show" exactly what I see on the screen....
 
T

Ted

You can also remove the z-index:1
"Ted" <[email protected]> skrev i meddelandet This is not what I said, remove the spantags, just write the code as I told you
"Veronika" <[email protected]> skrev i meddelandet actually this does not show the output correctly!! Where you see it in red, that's where it shows up! I did copy & paste, obviously that does not "show" exactly what I see on the screen....
 
Top