span versus div

[KiwiBrian]

I have a multiline bit of text which is aligned left. I wish to align the
last couple of words right. (A Phone number)
If I use <span style"text-align:right">Phone number</span> to try and
accomplish this it is ignored.
If I change the span tag to a div tag it works but inserts a virtual
line-feed.
What is the correct way of using CSS to force a word to be aligned
differently to the rest of the line?
Why does the span tag not work as I expect?

Brian Tozer

 

[rf]

I have a multiline bit of text which is aligned left. I wish to align the
last couple of words right. (A Phone number)

Hmmm. Tricky.

If you are letting the browser flow the bit of text then it's hard. However
it sounds like you have something like a name and address etc:

name
addr1
addr2
email [ --> over there] phone

This is easy.

If I use <span style"text-align:right">Phone number</span> to try and
accomplish this it is ignored.

text-align is used to align the text *within* the element, not the element
itself. text-align also only applies to block level elements. That's why it
doesn't work with <span> which is inline. Even if it did the size of a span
element is exactly the size of its content so there is nowhere for the text
to move to *be* aligned.

If I change the span tag to a div tag it works but inserts a virtual
line-feed.

Yep. That is how block level elements work. They stack vertically down the
page, unless you tell them otherwise.

What is the correct way of using CSS to force

There is no way to force anything. You can only suggest

a word to be aligned
differently to the rest of the line?

Float.

name<br>
addr1<br>
addr2<br>

Why does the span tag not work as I expect?

Element. It is a span element.

 

[Leonard Blaisdell]

If I use <span style"text-align:right">Phone number</span> to try and
accomplish this it is ignored.

Why does the span tag not work as I expect?

You're missing an equals sign. <span style="text-align: right">

leo

 

[KiwiBrian]

You're missing an equals sign. <span style="text-align: right">

Doh!! Or Dugh!!
Thanks Leo. Unfortunately that was a typo in my post and the source was
correct.
Richard has given me a superb answer for what I meant to write and you have
for what I did actually write. )

Brian Tozer

 

[KiwiBrian]

I have a multiline bit of text which is aligned left. I wish to align the
last couple of words right. (A Phone number)

Hmmm. Tricky.

If you are letting the browser flow the bit of text then it's hard.
However
it sounds like you have something like a name and address etc:

name
addr1
addr2
email [ --> over there] phone

This is easy.

If I use <span style"text-align:right">Phone number</span> to try and
accomplish this it is ignored.

text-align is used to align the text *within* the element, not the element
itself. text-align also only applies to block level elements. That's why
it
doesn't work with <span> which is inline. Even if it did the size of a
span
element is exactly the size of its content so there is nowhere for the
text
to move to *be* aligned.

If I change the span tag to a div tag it works but inserts a virtual
line-feed.

Yep. That is how block level elements work. They stack vertically down the
page, unless you tell them otherwise.

What is the correct way of using CSS to force

There is no way to force anything. You can only suggest

a word to be aligned
differently to the rest of the line?

Float.

name<br>
addr1<br>
addr2<br>
<span style="float: right;">phone number</span>email<br>

Thanks Richard for your trouble.
A superb answer
One to study, digest, understand, and hopefully never forget.

Brian Tozer

 

[Mark Parnell]

Thanks Leo. Unfortunately that was a typo in my post and the source was
correct.

One of the many reasons that it is best to post a URL rather than
snippets of code.

Not having a go at you, BTW - just a general comment.

 

[Spartanicus]

Float.

Using floating for this purpose is a hack which as per usual causes
nasty problems, it's unfortunately needed for IE, but proper browsers
should be fed a proper method:
http://www.spartanicus.utvinternet.ie/left_and_right_alignment_using_css.htm

 

[rf]

Spartanicus argued:

Using floating for this purpose is a hack which as per usual causes
nasty problems, it's unfortunately needed for IE,

And just why would that be a hack? Float a standard procedure, it works (in
this situation) and is admaribly suited to what the OP wanted.

If you are thinking that floating a <span> is a hack then look at the spec.
Float applies to "all but positioned elements and generated content".

What nasty problems would exhibit? Apart from the usual IE box model and
float problems which do not apply to such a simple case.

but proper browsers
should be fed a proper method:

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

I agree. Proper browsers should be fed proper food.

But, until the whole world is full of "proper browsers" rather than the
current estimate of 80% IE would you use this in a web situation? Would you
purposely instruct the OP to use something that *will* fail for those 80% of
viewers? I would not.

In any case that solution uses a table. The fact that the elements are given
their table qualities with CSS rather than HTML is irrelevant. It is still a
table. One of these days I am going to construct a CSS table and an HTML
table and thouroughly inspect the resulting DOM. I suspect there will be
minimum difference between the two constructs.

You have called me out a few times recently with this sort of stuff. Until
you prove what you assert with properly cited references I will assume that
your comments are merely your own opinion.

 

[Spartanicus]

And just why would that be a hack?

Any usage of floats other than to get inline content to "wrap around"
the contour of the floated element is a hack and fundamentally
inappropriate.

Float a standard procedure

I've no idea what "standard procedure" refers to. Regrettably many
people use floats all over the place to get around IE's inadequacies,
but that does not make it correct usage.

, it works (in this situation)

It also causes problems in this situation.

and is admaribly suited to what the OP wanted.

Not pandering to what OPs want is a good tradition here, first the most
appropriate solution should be noted, where a hack is suggested the
caveats should be pointed out.

What nasty problems would exhibit?

1) Floats are not part of the flow, this is something many people do not
fathom and is a common cause of confusion. This is especially an issue
when floating is used inappropriately (overlapping content, scrollbar
not appearing when it should, vertical displacement etc.).
2) UAs are riddled with float bugs.

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

I agree. Proper browsers should be fed proper food.

But, until the whole world is full of "proper browsers" rather than the
current estimate of 80% IE would you use this in a web situation? Would you
purposely instruct the OP to use something that *will* fail for those 80% of
viewers? I would not.

Apparently you've not bothered to look at the document, it feeds a
proper method to CSS compliant UAs and a hack to IE.

In any case that solution uses a table. The fact that the elements are given
their table qualities with CSS rather than HTML is irrelevant. It is still a
table.

Oh dear, you appear to have missed the rather important distinction
between CSS and HTML tables.

One of these days I am going to construct a CSS table and an HTML
table and thouroughly inspect the resulting DOM. I suspect there will be
minimum difference between the two constructs.

Sensible UAs probably implement a CSS table model and map HTML tables to
that model, not that this matters to the point here.

 

[Neal]

Using floating for this purpose is a hack

While I disagree with the above statement, wrapping the two items in
markup set to position: relative, and then absolutely positioning the
second element with say top:0 and left: 10em would result in the desired
effect without reliance on float.

Still, float is simpler.

 

[rf]

1) Floats are not part of the flow, this is something many people do not
fathom and is a common cause of confusion. This is especially an issue
when floating is used inappropriately (overlapping content, scrollbar
not appearing when it should, vertical displacement etc.).

You missed the single problem with the float "hack" that would affect the
example under question: The phone number would be linearised before the
email.

There would be no overlaping content, no missing scrollbars. Are you sure
you are not confusing float with absolute positioning.

2) UAs are riddled with float bugs.

Which do not trigger in this exemple. On the other hand the most widely used
browser does not support CSS tables. Also, the OP probablyl does not support
CSS tables. Why introduce heaps of CSS, including CSS hacks tofeed IE
something different (which that page you presented does not explain) and
other stuf that may just confuese him?

For that matter why does your example replace CSS tables with a float "hack"
for IE? Why not replace the CSS table with an HTML table which IE
understands perfectly, without any float problems, including the linearizing
problem? You like CSS tables but you dislike HTML tables so much you would
use float, which you state is a "hack"? Really now

Apparently you've not bothered to look at the document, it feeds a
proper method to CSS compliant UAs and a hack to IE.

And just where does the document explain this. It shows it certainly but it
does not explain it? I see a float: left but the OP would probably not
understand the significance of this, and the body> stuff that follows. In
fact that itself is a hack, the standard "hide CSS from IE" hack. You are
using a hack to use a, your term, hack

Another point, your page quite clearly states that "Opera 6 fails to render
this correctly". You provide a solution that you *know* breaks with a
certain browser?

Oh dear, you appear to have missed the rather important distinction
between CSS and HTML tables.

Oh dear indeed. I think you should go over to the CSS spec and read again
chapter 17, the table chapter.
Some random quotes from that chapter:

<quote>
The preceding example shows how CSS works with HTML 4.0 elements; in HTML
4.0, the semantics of the various table elements (TABLE, CAPTION, THEAD,
TBODY, TFOOT, COL, COLGROUP, TH, and TD) are well-defined. In other document
languages (such as XML applications), there may not be pre-defined table
elements. Therefore, CSS2 allows authors to "map" document language elements
to table elements via the 'display' property. For example, the following
rule makes the FOO element act like an HTML TABLE element and the BAR
element act like a CAPTION element:
</quote>

CSS tables allow an author to reproduce HTML tables.

<quote>
The CSS table model is based on the HTML 4.0 table mode
</quote>

Pretty much sums it up. CSS tables, being based on the HTML table model,
probably *are* HTML tables. That is there is nothing different between <span
style="display: table-cell"> and <td>, just as there is nothing different
between <span style="font-size: 2em; font-weight: bolder; display: block;
margin: .67em 0;"> and <h1>.

<quote>
Thus, the table model consists of tables, captions, rows, row groups,
columns, column groups, and cells.
</quote>

Now we know what the table model is and:

<quote>
The CSS model does not require that the document language include elements
that correspond to each of these components. For document languages (such as
XML applications) that do not have pre-defined table elements, authors must
map document language elements to table elements; this is done with the
'display' property. The following 'display' values assign table semantics to
an arbitrary element:
</quote>

OK, if we, in our XML application, do not have the predefined <table>, <tr>,
<td> etc elements we build them with CSS. That is I, in my XML application,
actually build a <td> element that is behaves exactly the same as the HTML
<td> element. Conversly because our language, (X)HTML, *does* have these
elements so we don't have to build them with CSS.

Throughout the rest of the chapter there are many examples. The CSS
exampless show how to build the above <td> etc elements.

The (X)HTML examples exclusivly use <table> etc. They do not use something
like <li> and li {display: table-cell}. They use <table> because the
language that *this* CSS is acting on is HTML.

I restate my prior assertion: CSS tables *are* HTML tables. There is no
difference between the two.

I would dismiss your whole page and replace it with a simple HTML table.

 

[Jukka K. Korpela]

One of the many reasons that it is best to post a URL rather than
snippets of code.

Besides, if the URL had been posted, we would already know that the real
problem calls for a table, since the OP wants to present some tabular
material (and have it displayed in columns, the usual way of rendering
tables visually). Now it's only 95 % certain.

 

[Spartanicus]

While I disagree with the above statement

Got a reason to go with that?

, wrapping the two items in
markup set to position: relative, and then absolutely positioning the
second element with say top:0 and left: 10em would result in the desired
effect without reliance on float.

Another of my favorite bugbears, inappropriate usage of absolute
positioning.

 

[rf]

I restate my prior assertion: CSS tables *are* HTML tables. There is no
difference between the two.

On thinking about this I think I may add an addendum to that assertion.

CSS properties pertaining to tables (commonly known as CSS tables) are not
for building tables as such. They are for building elements that have table
like behavoiur exactly like the HTML table elements. These new elements may
then be used to build tables.

This only applies if the XML under discussion does not already have these
elements. If the language already has elements that behave like HTML table
elements then there is no need to use the CSS properties to buld new
elements, rather simply use the provided elements.

So, CSS tables are not really the same as HTML tables after all. CSS
"tables" properties are used to build building blocks in non-HTML (say)
languages that may be used to build HTML like tables.

<aside>
I have particular concern with authors taking already existing HTML
elements, like <ol> or <li> and turning these into different elements that
have HTML table like behaviour. This is just downright confusing.

If an author *must* use the CSS properties then IMHO they should be applied
to an element that has no other perceived meaning, like a <div>.
</aside>

 

[Toby Inkster]

If an author *must* use the CSS properties then IMHO they should be applied
to an element that has no other perceived meaning, like a <div>.

An example from some time ago -- using <ul>, <li>, <blockquote> and <p>
to create a semantically correct list of quotations, but visually presenting
it as a table.

http://examples.tobyinkster.co.uk/table-tricks/q

 

[rf]

Spartanicus

Another of my favorite bugbears, inappropriate usage of absolute
positioning.

So what would be an *appropriate* use of absolute positioning?

 

[Duende]

While sitting in a puddle rf scribbled in the mud:

Spartanicus


So what would be an *appropriate* use of absolute positioning?

Putting the little roll of paper next to the toilet.

 

[Spartanicus]

You missed the single problem with the float "hack" that would affect the
example under question: The phone number would be linearised before the
email.

If I understood KiwiBrian's OP correctly (an url would have prevented
any doubt) then he's aligning text in the same vertical space, part left
aligned, part right aligned. Narrow the viewport enough and one or more
of the problems I described occur.

Which do not trigger in this exemple.

You know them all? There are to many to keep track of even if you
restrict yourself to the big 3 rendering engines.

On the other hand the most widely used browser does not support CSS tables.

Again: that's why *it* is served a hack, proper UAs get fed a proper
method.

Also, the OP probablyl does not support CSS tables.

CSS table support is a UA property, not an author property.

Why introduce heaps of CSS

7 lines of CSS, but there's nothing like exaggeration to make it appear
like you have a point.

including CSS hacks tofeed IE
something different (which that page you presented does not explain)

It's pretty much a cut and paste solution to a single well defined
problem, not a CSS table tutorial.

and other stuf that may just confuese him?

He might learn something. If he has no desire to learn, cut and paste
suffices.

For that matter why does your example replace CSS tables with a float "hack"
for IE? Why not replace the CSS table with an HTML table which IE
understands perfectly, without any float problems, including the linearizing
problem? You like CSS tables but you dislike HTML tables so much you would
use float, which you state is a "hack"? Really now

HTML tables are for marking up tabular content, any HTML element can be
set to *behave* like a table element without having to resort to non
semantic markup.

I strongly suggest that you brush up on your basic HTML and CSS
knowledge, you have a fundamentally wrong view of how the 2 work.

And just where does the document explain this. It shows it certainly but it
does not explain it?

Apparently you have eye sight issues to boot. From the page:

Explanation:

CSS tables are the proper tool for this job, unfortunately poor old IE
doesn't support them. IE is therefore fed a hack using a float, however
using floats for alignment suffers from a number of nasty drawbacks
(overlapping content when the window width isn't wide enough, or
vertical displacement). By using this method, at least these drawbacks
remain confined to poor old IE, other browsers should display a
scrollbar if there isn't enough width available.

Another point, your page quite clearly states that "Opera 6 fails to render
this correctly". You provide a solution that you *know* breaks with a
certain browser?

I don't code fallbacks for certain UAs, examples are IE5.0, IE/Mac and
O6. I used to think that O6 was a capable CSS renderer and coded to keep
it happy, that opinion has changed since O7. There are well known hacks
available for those that want to add a fallback for O6.

Oh dear indeed. I think you should go over to the CSS spec and read again
chapter 17, the table chapter.
Some random quotes from that chapter:

<quote>
The preceding example shows how CSS works with HTML 4.0 elements; in HTML
4.0, the semantics of the various table elements (TABLE, CAPTION, THEAD,
TBODY, TFOOT, COL, COLGROUP, TH, and TD) are well-defined. In other document
languages (such as XML applications), there may not be pre-defined table
elements. Therefore, CSS2 allows authors to "map" document language elements
to table elements via the 'display' property. For example, the following
rule makes the FOO element act like an HTML TABLE element and the BAR
element act like a CAPTION element:
</quote>

CSS tables allow an author to reproduce HTML tables.

Your ignorance may be beyond salvation, there's a rather important
distinction between an element *acting* like an HTML table and an HTML
table with the associated semantics.

That is there is nothing different between <span
style="display: table-cell"> and <td>, just as there is nothing different
between <span style="font-size: 2em; font-weight: bolder; display: block;
margin: .67em 0;"> and <h1>.

You really are clueless.

Now we know what the table model is and:

<quote>
The CSS model does not require that the document language include elements
that correspond to each of these components. For document languages (such as
XML applications) that do not have pre-defined table elements, authors must
map document language elements to table elements; this is done with the
'display' property. The following 'display' values assign table semantics to
an arbitrary element:
</quote>

OK, if we, in our XML application, do not have the predefined <table>, <tr>,
<td> etc elements we build them with CSS. That is I, in my XML application,
actually build a <td> element that is behaves exactly the same as the HTML
<td> element. Conversly because our language, (X)HTML, *does* have these
elements so we don't have to build them with CSS.

Afaik XML has *no* semantics, which makes any comparison between it and
HTML pointless.

 

[rf]

While sitting in a puddle rf scribbled in the mud:

Putting the little roll of paper next to the toilet.

The one with the contents of
http://www.spartanicus.utvinternet.ie/left_and_right_alignment_using_css.htm
printed on it?

 

[rf]

An example from some time ago -- using <ul>, <li>, <blockquote> and <p>
to create a semantically correct list of quotations, but visually presenting
it as a table.

http://examples.tobyinkster.co.uk/table-tricks/q

<grin>
http://users.bigpond.net.au/rf/temp/quotes.gif
</grin>