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

http://www.blooberry.com/indexdot/cs...sify/float.htm and http://www.blooberry.com/indexdot/cs...y/position.htm

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]

Stan Brown wrote:

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

http://www.blooberry.com/indexdot/cs...sify/float.htm

and

http://www.blooberry.com/indexdot/cs...y/position.htm

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?

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]

Stan Brown wrote:

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

http://www.blooberry.com/indexdot/cs...sify/float.htm

and

http://www.blooberry.com/indexdot/cs...y/position.htm

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?

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]

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

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

[kchayka]

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

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

kchayka wrote:

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

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]

kchayka wrote:

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

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]

In article <kr************ *************** **@news1.news.x s4all.nl> in
comp.infosystem s.www.authoring.stylesheets, Kris
<kr*******@xs4a ll.netherlands> wrote:

In article <MP************ ************@ne ws.odyssey.net> ,
Stan Brown <th************ @fastmail.fm> wrote: [When floating a revision date right, does it make any difference
whether it's wrapped in span or div?]
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.
Makes sense; thanks.
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.
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.
Use <span class="date"></span>, is what I suggest.

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]

kchayka wrote:

Barbara de Zoete wrote:

kchayka wrote:

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

Okay, you've got me confused and therefore you've got my attention.
One can give both <div> and <span> a display:block; ?

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

But when it comes to that the <span> should be a <div>?

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

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

I'm not sure. What do you think now?

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]

In article <MP************ ************@ne ws.odyssey.net> ,
Stan Brown <th************ @fastmail.fm> wrote:

Use <span class="date"></span>, is what I suggest.

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.

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

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