473,322 Members | 1,781 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

float/position: any difference between div and span?

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/
Jul 20 '05 #1
12 10885
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*

Jul 20 '05 #2
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*

Jul 20 '05 #3
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.

Jul 20 '05 #4
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.

Jul 20 '05 #5
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*

Jul 20 '05 #6
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*

Jul 20 '05 #7
In article <kr*****************************@news1.news.xs4all .nl> in
comp.infosystems.www.authoring.stylesheets, Kris
<kr*******@xs4all.netherlands> wrote:
In article <MP************************@news.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
automatically 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/
Jul 20 '05 #8
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*

Jul 20 '05 #9
In article <MP************************@news.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*******@xs4all.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.
Jul 20 '05 #10
kchayka wrote:
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.


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

Jul 20 '05 #11
In article <kr*****************************@news1.news.xs4all .nl> in
comp.infosystems.www.authoring.stylesheets, Kris
<kr*******@xs4all.netherlands> wrote:
In article <MP************************@news.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.


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/
Jul 20 '05 #12
Stan Brown wrote:

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.


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.

Jul 20 '05 #13

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: discomiller | last post by:
Mario Mueller: Hello *, radiobuttons belong to other radiobuttons by the "name="any_value"" attribut. Thats a fakt. I got the following XML:...
2
by: Rainer Birkenmaier | last post by:
Hi Folks, I have 2 little problems: 1) http://birkenmaier.org/b.php IE 6.0 does something weired here: in the red box the first lines of text have a slight indet (2 or 3 pixels only). This...
6
by: TJ | last post by:
I've got a calendar that is based on the concept of lots of blocks that are spans with float:left. I would like to be able to have a detail section on the right side of the screen, so that when...
3
by: Michael Shell | last post by:
Greetings, I've been playing with CSS inline floats of <span> elements and the results are not quite what I would expect. In the example attached at the end of this post, I would expect the...
16
by: Wolfgang Meier | last post by:
Hi, Although it might seem like I am firing out random posts in quick succession this matter is indeed one I thought about for quite some time without coming to a conclusion: Why is it that...
0
by: jonipony | last post by:
HELP: Float Left box is drifting to the right in ie! -------------------------- I need som HELP with my CSS coding! On the following web page my design falls apart at screen size 800 x 600...
5
by: Oliver Block | last post by:
Hello everybody, I wonder why a <span style="float:right">some text</span> might be displayed out of a surrounding div element. It is shifted to the next line. I thougt it is supposed to...
22
by: ashkaan57 | last post by:
Hi, I am trying to put text on left and right side of the page and used: <div> <span>blah blah</span> <span style="float:right">blah blah</span> </div> The 2nd text does go to the right but the...
27
by: GloStix | last post by:
WARNING VIDEO TAKES A WHILE TO LOAD http://screencast.com/t/BWQ6DNtsM I really don't know how to fix this other than putting another div. But I dont' exactly want to do that for every page....
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.