Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > span versus div

Reply
Thread Tools

span versus div

 
 
KiwiBrian
Guest
Posts: n/a
 
      11-24-2004
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


 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      11-24-2004
KiwiBrian wrote:

> 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>


> Why does the span tag not work as I expect?


Element. It is a span element.

--
Cheers
Richard.


 
Reply With Quote
 
 
 
 
Leonard Blaisdell
Guest
Posts: n/a
 
      11-24-2004
In article <co0okf$i52$(E-Mail Removed)>, "KiwiBrian"
<(E-Mail Removed)> wrote:

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

<snip>
> Why does the span tag not work as I expect?


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

leo

--
<http://web0.greatbasin.net/~leo/>
 
Reply With Quote
 
KiwiBrian
Guest
Posts: n/a
 
      11-24-2004

"Leonard Blaisdell" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> In article <co0okf$i52$(E-Mail Removed)>, "KiwiBrian"
> <(E-Mail Removed)> wrote:
>
>> If I use <span style"text-align:right">Phone number</span> to try and
>> accomplish this it is ignored.

> <snip>
>> Why does the span tag not work as I expect?

>
> 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


 
Reply With Quote
 
KiwiBrian
Guest
Posts: n/a
 
      11-24-2004

"rf" <rf@.invalid> wrote in message
news:4WRod.46516$(E-Mail Removed)...
> KiwiBrian wrote:
>
>> 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


 
Reply With Quote
 
Mark Parnell
Guest
Posts: n/a
 
      11-24-2004
Previously in alt.html, KiwiBrian <(E-Mail Removed)> said:

> 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.

--
Mark Parnell
http://www.clarkecomputers.com.au
"Never drink rum&coke whilst reading usenet" - rf 2004
 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      11-24-2004
"rf" <rf@.invalid> wrote:

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


>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.i..._using_css.htm

--
Spartanicus
 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      11-24-2004
Spartanicus argued:
> "rf" <rf@.invalid> wrote:
>
> >KiwiBrian wrote:
> >
> >> I have a multiline bit of text which is aligned left. I wish to align

the
> >> last couple of words right. (A Phone number)

>
> >Float.

>
> 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.i..._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.

--
Cheers
Richard.


 
Reply With Quote
 
Spartanicus
Guest
Posts: n/a
 
      11-24-2004
"rf" <rf@.invalid> wrote:

>> 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?


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.

>> but proper browsers
>> should be fed a proper method:
>>

>http://www.spartanicus.utvinternet.i..._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.

--
Spartanicus
 
Reply With Quote
 
Neal
Guest
Posts: n/a
 
      11-24-2004
On Wed, 24 Nov 2004 08:12:59 +0000, Spartanicus <(E-Mail Removed)> wrote:

> "rf" <rf@.invalid> wrote:
>
>> KiwiBrian wrote:
>>
>>> I have a multiline bit of text which is aligned left. I wish to align
>>> the
>>> last couple of words right. (A Phone number)

>
>> Float.

>
> 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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
I'm looking for html cleaner. Example : convert <h1><span><font>my title</font></span></h1> => <h1>my title</h1>… Stéphane Klein Python 2 03-30-2010 12:35 AM
Can span include span? Fulio Open HTML 5 06-26-2009 10:24 PM
Re: Mozilla versus IE versus Opera versus Safari Peter Potamus the Purple Hippo Firefox 0 05-08-2008 12:56 PM
equal? versus eql? versus == versus === verus <=> Paul Butcher Ruby 12 11-28-2007 06:06 AM
div versus span tags TheKeith HTML 2 10-17-2003 07:42 PM



Advertisments