lining up text without tables

  • Thread starter Thread starter Veronika
  • Start date Start date
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
 
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>
 
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?
 
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!!
 
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"..
 
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.
 
<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.
 
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
 
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....
 
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....
 
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....
 
Back
Top