2 text alignment on the same line

A

Allerdyce.John

Hi,

Can someone please tell me how can I have 2 text alignment on the same
line?

I want a line where it has 'left text' to the farest left of the line
and 'right text' to the farest right of the same line.

I try below, but it does not work. It has 'left text' and 'right text'
next to each other:
<span style="color:purple" align="left">left text</span><span
style="color:green" align="right">right text</span> <br/>

And I try not to use Table or css float to achieve that.

Thank you.
 
D

dorayme

Hi,

Can someone please tell me how can I have 2 text alignment on the same
line?

I want a line where it has 'left text' to the farest left of the line
and 'right text' to the farest right of the same line.

I try below, but it does not work. It has 'left text' and 'right text'
next to each other:
<span style="color:purple" align="left">left text</span><span
style="color:green" align="right">right text</span> <br/>

And I try not to use Table or css float to achieve that.

Why do you try not to use float?
 
S

Sid

On 11 Aug 2006 22:11:05 -0700, (e-mail address removed) wrote:

: <span style="color:purple" align="left">


Check the CSS-specs for align.

Sid
 
J

Jonathan N. Little

Hi,

Can someone please tell me how can I have 2 text alignment on the same
line?

I want a line where it has 'left text' to the farest left of the line
and 'right text' to the farest right of the same line.

I try below, but it does not work. It has 'left text' and 'right text'
next to each other:
<span style="color:purple" align="left">left text</span><span
style="color:green" align="right">right text</span> <br/>

And I try not to use Table or css float to achieve that.

Good man!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Floats</title>

<style type="text/css">
..onLeft { float: left; }
..onRight { float: right; }
..below { clear: both; }
</style>

</head>
<body>
<div class="onLeft">I'm on the far left.</div>
<div class="onRight">And I'm on the far right.</div>
<p class="below">And I am below them both!</p>
</body>
</html>
 
N

Neredbojias

To further the education of mankind, (e-mail address removed) vouchsafed:
Hi,

Can someone please tell me how can I have 2 text alignment on the same
line?

I want a line where it has 'left text' to the farest left of the line
and 'right text' to the farest right of the same line.

I try below, but it does not work. It has 'left text' and 'right text'
next to each other:
<span style="color:purple" align="left">left text</span><span
style="color:green" align="right">right text</span> <br/>

And I try not to use Table or css float to achieve that.

Must use float or absolute positioning.

Also, this:

<span style="color:purple" align="left">

is invalid. Should be:

<span style="background:inherit;color:purple;text-align:left;">...
 
A

Andy Dingley

Neredbojias said:
Must use float or absolute positioning.

"Float" doesn't itself control text alignment, and it would be
misleading to imply so.

Inline elements won't render the CSS text-align property
http://www.w3.org/TR/CSS21/text.html#alignment-prop

To make them do so, you have to change their display property, so that
their internal content is rendered as a block. There are two ways to do
this.

Ideally we'd set "display: inline-block;" which does just what we want.
Unfortunately browser support is unusably low for this as yet.

So instead we have to use "display: block;" instead. This works fine,
except that it sets the "outside" behaviour of the element to be block
as well -- we have to counteract that by adding the floats.


Also, this:
<span style="color:purple" align="left">
is invalid. Should be:
<span style="background:inherit;color:purple;text-align:left;">...

Why is that invalid ? It's _obsolete_ perhaps, but it's not invalid.
Invalid has a definite technical meaning, and this isn't it.

Also what useful purpose does setting background-color: inherit; have,
other than to turn off a validator warning message ?
 
N

Neredbojias

To further the education of mankind, "Andy Dingley"
<[email protected]> vouchsafed: To further the education of
mankind said:
"Float" doesn't itself control text alignment, and it would be
misleading to imply so.

Inline elements won't render the CSS text-align property
http://www.w3.org/TR/CSS21/text.html#alignment-prop

To make them do so, you have to change their display property, so that
their internal content is rendered as a block. There are two ways to
do this.

Ideally we'd set "display: inline-block;" which does just what we
want. Unfortunately browser support is unusably low for this as yet.

So instead we have to use "display: block;" instead. This works fine,
except that it sets the "outside" behaviour of the element to be block
as well -- we have to counteract that by adding the floats.

Can you not just use divs instead of spans and float them?
Why is that invalid ? It's _obsolete_ perhaps, but it's not invalid.
Invalid has a definite technical meaning, and this isn't it.

Technically speaking, perhaps invalid !== obsolete but still invalid =
obsolete. I suppose the definitive guage would be the w3c validator
which I haven't tried because I do consider obsolete things to be no
longer valid.
Also what useful purpose does setting background-color: inherit; have,
other than to turn off a validator warning message ?

Exactly that. It's a sop to the w3c pragma and strict adherence to some
questionable definition of "validated" in the purest form.
 
N

Neredbojias

To further the education of mankind, "Andy Dingley"
"Float" doesn't itself control text alignment, and it would be
misleading to imply so.

Inline elements won't render the CSS text-align property
http://www.w3.org/TR/CSS21/text.html#alignment-prop

To make them do so, you have to change their display property, so that
their internal content is rendered as a block. There are two ways to do
this.

Ideally we'd set "display: inline-block;" which does just what we want.
Unfortunately browser support is unusably low for this as yet.

So instead we have to use "display: block;" instead. This works fine,
except that it sets the "outside" behaviour of the element to be block
as well -- we have to counteract that by adding the floats.

Can you not just use divs instead of spans and float them?
Why is that invalid ? It's _obsolete_ perhaps, but it's not invalid.
Invalid has a definite technical meaning, and this isn't it.

Technically speaking, perhaps invalid !== obsolete but still invalid =
obsolete. I suppose the definitive guage would be the w3c validator
which I haven't tried because I do consider obsolete things to be no
longer valid.
Also what useful purpose does setting background-color: inherit; have,
other than to turn off a validator warning message ?

Exactly that. It's a sop to the w3c pragma and strict adherence to some
questionable definition of "validated" in the purest form.
 
A

Andy Dingley

Neredbojias said:
Can you not just use divs instead of spans

Choose the elements based on their HTML structure and the allowable
containment expressed in the DTD. You can change their display property
with CSS, you can't change their DTD.

I'd suggest <span> for a couple of reasons:

- It's what the OP already had.

- There's a <br> in there, which somewhat implies an "inline" context
for this fragment, not a "block" context

- Generally one should go for the simplest workable solution.
and float them?

I can't really find much difference between floating a <span> and
floating a <div>. Ideally we'd be using inline-block here, so anything
that forces us into using block instead is something of a hack. That
said, there's not much difference in hackiness between <div> and <span
style="display: block;" >


Writing "Invalid = Obsolete" just isn't a good way to express things.
Logically these are _not_ equal,. because although one _implies_ the
other, this is a one-directional relationship and it doesn't mean the
concepts are in any way "equal".

Maybe all invalid code should be regarded as obsolete (I'd support
that). But valid does have this very particular technical meaning
already and we really can't mess with that by "extending" it. If we do
that, then we degrade our language of expression for talking about HTML
and we lose our ability to talk in detail.
Then we'd just have MySpace instead OMG!! WTF!?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top