float/position: any difference between div and span?

[Stan Brown]

I've been thinking about float-ing a span versus float-ing a div,
and the same for absolute positioning. When what is floated or
positioned is a short chunk of text, I don't see any _visual_
difference between the two.

What I want to do is float (or position) a revision date at the
right margin of a line that also has some text left justified. I
tried earlier to do this and failed utterly in MSIE 4. But I was
using span not div, and having recently come across[color=blue]
> http://www.blooberry.com/indexdot/cs...sify/float.htm[/color]
and[color=blue]
> http://www.blooberry.com/indexdot/cs...y/position.htm[/color]
I see that MSIE4 is known not to work for inline elements with these
properties.

I understand of course that something containing other blocks needs
to be a div, but if it's just text does it matter?

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA

http://OakRoadSystems.com/

HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Barbara de Zoete]

Re: float/position: any difference between div and span?

Stan Brown wrote:[color=blue]
> I've been thinking about float-ing a span versus float-ing a div,
> and the same for absolute positioning. When what is floated or
> positioned is a short chunk of text, I don't see any _visual_
> difference between the two.
>
> What I want to do is float (or position) a revision date at the
> right margin of a line that also has some text left justified. I
> tried earlier to do this and failed utterly in MSIE 4. But I was
> using span not div, and having recently come across
>[color=green]
>> http://www.blooberry.com/indexdot/cs...sify/float.htm[/color]
>
> and
>[color=green]
>> http://www.blooberry.com/indexdot/cs...y/position.htm[/color]
>
> I see that MSIE4 is known not to work for inline elements with these
> properties.
>
> I understand of course that something containing other blocks needs
> to be a div, but if it's just text does it matter?
>[/color]

As far as I know <div> is a block element and <span> is an inline
element. One shouldn't float inline elements, for they should be (ahum
....) inline.
Having said this, I know that some browsers don't protest against inline
elements being treated as if they were block elements. As you found out,
they render the content the way you want them to.

But keep in mind that it is not correct. There could come a moment in
time (ahum again) that all browsers (me dreaming here) do treat mark-up
and style as specified. This would mean you have to go thrue all your
pages to find the then malfunctioning source code.

It's up to you, I guess.

--

Groet,
Barbara

http://home.wanadoo.nl/b.de.zoete/html/vliegen.html *Zweefvliegen*?
http://home.wanadoo.nl/b.de.zoete/html/weblog.html *Dagboek*

[Barbara de Zoete]

Re: float/position: any difference between div and span?

Stan Brown wrote:[color=blue]
> I've been thinking about float-ing a span versus float-ing a div,
> and the same for absolute positioning. When what is floated or
> positioned is a short chunk of text, I don't see any _visual_
> difference between the two.
>
> What I want to do is float (or position) a revision date at the
> right margin of a line that also has some text left justified. I
> tried earlier to do this and failed utterly in MSIE 4. But I was
> using span not div, and having recently come across
>[color=green]
>> http://www.blooberry.com/indexdot/cs...sify/float.htm[/color]
>
> and
>[color=green]
>> http://www.blooberry.com/indexdot/cs...y/position.htm[/color]
>
> I see that MSIE4 is known not to work for inline elements with these
> properties.
>
> I understand of course that something containing other blocks needs
> to be a div, but if it's just text does it matter?
>[/color]

As far as I know <div> is a block element and <span> is an inline
element. One shouldn't float inline elements, for they should be (ahum
....) inline.
Having said this, I know that some browsers don't protest against inline
elements being treated as if they were block elements. As you found out,
they render the content the way you want them to.

But keep in mind that it is not correct. There could come a moment in
time (ahum again) that all browsers (me dreaming here) do treat mark-up
and style as specified. This would mean you have to go thrue all your
pages to find the then malfunctioning source code.

It's up to you, I guess.

--

Groet,
Barbara

http://home.wanadoo.nl/b.de.zoete/html/vliegen.html *Zweefvliegen*?
http://home.wanadoo.nl/b.de.zoete/html/weblog.html *Dagboek*

[kchayka]

Re: float/position: any difference between div and span?

Barbara de Zoete wrote:[color=blue]
>
> As far as I know <div> is a block element and <span> is an inline
> element. One shouldn't float inline elements, for they should be (ahum
> ...) inline.[/color]

There is nothing inherently wrong about treating inline elements as
block elements, or the reverse. If it really were a bad idea, the
"display" property might not even exist.

What one shouldn't do is _markup_ an element as inline (span) when it
should have been block (div) in the first place. ;)

--
To email a reply, remove (dash)ns(dash). Mail sent to the ns
address is automatically deleted and will not be read.

[kchayka]

Re: float/position: any difference between div and span?

Barbara de Zoete wrote:[color=blue]
>
> As far as I know <div> is a block element and <span> is an inline
> element. One shouldn't float inline elements, for they should be (ahum
> ...) inline.[/color]

There is nothing inherently wrong about treating inline elements as
block elements, or the reverse. If it really were a bad idea, the
"display" property might not even exist.

What one shouldn't do is _markup_ an element as inline (span) when it
should have been block (div) in the first place. ;)

--
To email a reply, remove (dash)ns(dash). Mail sent to the ns
address is automatically deleted and will not be read.

[Barbara de Zoete]

Re: float/position: any difference between div and span?

kchayka wrote:[color=blue]
> Barbara de Zoete wrote:
>[color=green]
>>As far as I know <div> is a block element and <span> is an inline
>>element. One shouldn't float inline elements, for they should be (ahum
>>...) inline.[/color]
>
>
> There is nothing inherently wrong about treating inline elements as
> block elements, or the reverse. If it really were a bad idea, the
> "display" property might not even exist.
>
> What one shouldn't do is _markup_ an element as inline (span) when it
> should have been block (div) in the first place. ;)
>[/color]

Okay, you've got me confused and therefore you've got my attention.
One can give both <div> and <span> a display:block; ?
But when it comes to that the <span> should be a <div>?

Is this what you mean? Or do I get it all wrong now?

--

Groet,
Barbara

http://home.wanadoo.nl/b.de.zoete/html/vliegen.html *Zweefvliegen*?
http://home.wanadoo.nl/b.de.zoete/html/weblog.html *Dagboek*

[Barbara de Zoete]

Re: float/position: any difference between div and span?

kchayka wrote:[color=blue]
> Barbara de Zoete wrote:
>[color=green]
>>As far as I know <div> is a block element and <span> is an inline
>>element. One shouldn't float inline elements, for they should be (ahum
>>...) inline.[/color]
>
>
> There is nothing inherently wrong about treating inline elements as
> block elements, or the reverse. If it really were a bad idea, the
> "display" property might not even exist.
>
> What one shouldn't do is _markup_ an element as inline (span) when it
> should have been block (div) in the first place. ;)
>[/color]

Okay, you've got me confused and therefore you've got my attention.
One can give both <div> and <span> a display:block; ?
But when it comes to that the <span> should be a <div>?

Is this what you mean? Or do I get it all wrong now?

--

Groet,
Barbara

http://home.wanadoo.nl/b.de.zoete/html/vliegen.html *Zweefvliegen*?
http://home.wanadoo.nl/b.de.zoete/html/weblog.html *Dagboek*

[Stan Brown]

Re: float/position: any difference between div and span?

In article <kristiaan-DA8E06.21061510 092003@news1.ne ws.xs4all.nl> in
comp.infosystem s.www.authoring.stylesheets, Kris
<kristiaan@xs4a ll.netherlands> wrote:[color=blue]
>In article <MPG.19c934f32a 48a28098b354@ne ws.odyssey.net> ,
> Stan Brown <the_stan_brown @fastmail.fm> wrote:[/color]
[When floating a revision date right, does it make any difference
whether it's wrapped in span or div?]
[color=blue]
>There isn't. Because both get set to behave like block-level elements
>automaticall y when you float them. The only override that works from
>then on is display: none; which will effectively remove the element from
>appearance.[/color]

Makes sense; thanks.
[color=blue]
>You may or may have not found already that IE4 does very little right in
>the CSS department. Better to treat it as Netscape4.x and pals.[/color]

Well, yes. As I think I said, I struggled for a whole afternoon (and
asked for help here), without success -- because I was using span.
The references I cited earlier lead me to suspect that div might
actually work. Before I tried more experiments I wanted to ask
whether there was anything wrong with using div.
[color=blue]
>Use <span class="date"></span>, is what I suggest.[/color]

Okay, but why do you suggest span over div? What's the advantage of
span (or the disadvantage of div) in this situation? That's what I'm
trying to understand.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA

http://OakRoadSystems.com/

HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Barbara de Zoete]

Re: float/position: any difference between div and span?

kchayka wrote:[color=blue]
> Barbara de Zoete wrote:
>[color=green]
>>kchayka wrote:
>>[color=darkred]
>>>Barbara de Zoete wrote:
>>>
>>>
>>>>As far as I know <div> is a block element and <span> is an inline
>>>>element. One shouldn't float inline elements, for they should be (ahum
>>>>...) inline.
>>>
>>>There is nothing inherently wrong about treating inline elements as
>>>block elements, or the reverse. If it really were a bad idea, the
>>>"display" property might not even exist.
>>>
>>>What one shouldn't do is _markup_ an element as inline (span) when it
>>>should have been block (div) in the first place. ;)[/color]
>>
>>Okay, you've got me confused and therefore you've got my attention.
>>One can give both <div> and <span> a display:block; ?[/color]
>
> <div> is a block element by default, so it is display:block by default.
> Same for other block elements p, hx, ul, li...
>
> <span> is an inline element so it defaults to display:inline.
> Ditto img, a, strong, em...
>
> You can make pretty much any inline element a block element simply by
> setting display:block. I do it all the time with images and anchors.
> For example: a {display:block}
> Likewise, you can change a block element to inline. However, I'm
> assuming that if you do either, there is some specific reason for it and
> other related properties will also be set, like maybe float.
>[color=green]
>>But when it comes to that the <span> should be a <div>?[/color]
>
> I can't tell without seeing the markup, but consider the element in
> context. An inline element cannot contain a block element, so if the
> <span> contains elements like paragraphs or lists, then it really should
> be a <div> instead. If the span contains only other inline elements or
> text and is contained in some block element, then it really is a span.
>
> Mark up the HTML correctly according to the context, then change the
> element properties with CSS. That's what it's for. :)
>[color=green]
>>Is this what you mean? Or do I get it all wrong now?[/color]
>
> I'm not sure. What do you think now?[/color]

Thank you for this very clear explanation. I think I get the point. I
checked my source and somehow (without really understanding it before) I
seem to have used divs and span in the way you just explained. Intuition
perhaps or an earlier understanding that got lost when learning more and
more and things getting more and more complicated.

Thanks.

--

Groet,
Barbara

http://home.wanadoo.nl/b.de.zoete/html/vliegen.html *Zweefvliegen*?
http://home.wanadoo.nl/b.de.zoete/html/weblog.html *Dagboek*

[Kris]

Re: float/position: any difference between div and span?

In article <MPG.19c985ab9a a2dd0298b35b@ne ws.odyssey.net> ,
Stan Brown <the_stan_brown @fastmail.fm> wrote:
[color=blue][color=green]
> >Use <span class="date"></span>, is what I suggest.[/color]
>
> Okay, but why do you suggest span over div? What's the advantage of
> span (or the disadvantage of div) in this situation? That's what I'm
> trying to understand.[/color]

It gets explained more better than I could right now, in replies of
other people to this thread.

--
Kris
kristiaan@xs4al l.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.

[Brian]

Re: float/position: any difference between div and span?

kchayka wrote:[color=blue]
> You can make pretty much any inline element a block element simply by
> setting display:block. I do it all the time with images and anchors.
> For example: a {display:block}
> Likewise, you can change a block element to inline.[/color]

True, but one should note that "Conforming HTML user agents may ignore
the 'display' property."
< http://www.w3.org/TR/REC-CSS2/visure...ropdef-display >

That said, I don't know of any css browsers that do so.

--
Brian
follow the directions in my address to email me

[Stan Brown]

Re: float/position: any difference between div and span?

In article <kristiaan-7E988D.14421511 092003@news1.ne ws.xs4all.nl> in
comp.infosystem s.www.authoring.stylesheets, Kris
<kristiaan@xs4a ll.netherlands> wrote:[color=blue]
>In article <MPG.19c985ab9a a2dd0298b35b@ne ws.odyssey.net> ,
> Stan Brown <the_stan_brown @fastmail.fm> wrote:
>[color=green][color=darkred]
>> >Use <span class="date"></span>, is what I suggest.[/color]
>>
>> Okay, but why do you suggest span over div? What's the advantage of
>> span (or the disadvantage of div) in this situation? That's what I'm
>> trying to understand.[/color]
>
>It gets explained more better than I could right now, in replies of
>other people to this thread.[/color]

I don't mean to be obstreperous, but those "better explanations"
have not reached me.

I know the difference between div and span, and the difference
between inline and block level and that float or position
effectively makes span into a block-level element.

What I don't know is whether it makes any difference using <div> or
<span> for a short bit of text that does not contain other block-
level elements, such as a revision date. I would like to know this
because if it makes no difference then I'll use <div>, which MSIE4
will (maybe) render correctly. Otherwise I have to hide stylesheets
from MSIE4 entirely because it renders a floated span incorrectly.

Does anyone know the answer to my question?


--
Stan Brown, Oak Road Systems, Cortland County, New York, USA

http://OakRoadSystems.com/

HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[kchayka]

Re: float/position: any difference between div and span?

Stan Brown wrote:[color=blue]
>
> What I don't know is whether it makes any difference using <div> or
> <span> for a short bit of text that does not contain other block-
> level elements, such as a revision date.[/color]

If the element in question is self-contained in context, then it
shouldn't be marked up as an inline element. If, in context, it is part
of some other block element, then it may be inline.

--
To email a reply, remove (dash)ns(dash). Mail sent to the ns
address is automatically deleted and will not be read.