DIV layout question

[Tony A.]

Hi all, quick question: if I have two adjacent elements (e.g. <IMG>
elements) without a <BR> inbetween, they will get rendered side by
side if there is space in the window, as you'd expect. However, two
adjacent <DIV> elements get rendered vertically.

I tried setting style.position = "relative" etc, doesn't seem to help.
Is there any way to make DIVs behave like "normal" elements in this
respect? Or is there another container element that will/can be made
to behave "correctly"? I think IFRAMEs will, but I don't really want
to use them.

Context - this relates to a Firefox extension I'm working on which
will replace IMGs with DIVs (or other container) in pages on the fly,
so I don't have the option of changing the layout scheme of the
original pages.

Thanks for any tips.

[krimgelas]

Tony A. wrote:

Hi all, quick question: if I have two adjacent elements (e.g. <IMG>
elements) without a <BR> inbetween, they will get rendered side by
side if there is space in the window, as you'd expect. However, two
adjacent <DIV> elements get rendered vertically.

I tried setting style.position = "relative" etc, doesn't seem to help.
Is there any way to make DIVs behave like "normal" elements in this
respect? Or is there another container element that will/can be made
to behave "correctly"? I think IFRAMEs will, but I don't really want
to use them.

Context - this relates to a Firefox extension I'm working on which
will replace IMGs with DIVs (or other container) in pages on the fly,
so I don't have the option of changing the layout scheme of the
original pages.

Thanks for any tips.

I think you should use the <span> element instead.

Kris

[Tony A.]

krimgelas wrote:

Tony A. wrote:

Hi all, quick question: if I have two adjacent elements (e.g. <IMG>
elements) without a <BR> inbetween, they will get rendered side by
side if there is space in the window, as you'd expect. However, two
adjacent <DIV> elements get rendered vertically.

[...]
I think you should use the <span> element instead.

Thanks for the reply Kris - I tried using <span> instead, and indeed
that works as expected in Internet Explorer, but unfortunately not in
Firefox, and my code is for a Firefox extension.

I've shown the actual code I'm using below. In IE, two adjacent spans
generated this way get rendered side by side if there's space, as
expected. But in Firefox, the spans get rendered on top of each other,
as if set to absolute positioning or something (not the case,
otherwise it wouldn't work in IE). Maybe it's a Firefox bug, I should
probably post something in the Mozilla forums.

for (i=0;i<document.images.length;i++){

// create a div for the image, sized to image dimensions
var imgDiv = document.createElement("SPAN");
//imgDiv.style.position = "relative"; // makes no difference
imgDiv.style.width = document.images[i].width;
imgDiv.style.height = document.images[i].height;

document.images[i].parentNode.insertBefore(imgDiv,document.images[i]);

// move the image into it
imgDiv.appendChild(document.images[i]);
}

[Tony A.]

Actually scratch my previous reply, I tried it again with all other
code stripped out, and spans worked as expected in both browsers, so
I'm doing something wrong elsewhere. Damn I hate debugging javascript!
Thanks for the tip.

[Gus Richter]

Tony A. wrote:

Hi all, quick question: if I have two adjacent elements (e.g. <IMG>
elements) without a <BR> inbetween, they will get rendered side by
side if there is space in the window, as you'd expect. However, two
adjacent <DIV> elements get rendered vertically.
Because <div> is a "block" element which will produce a new line similar
to <p>.
I tried setting style.position = "relative" etc, doesn't seem to help.
Is there any way to make DIVs behave like "normal" elements in this
respect? Or is there another container element that will/can be made
to behave "correctly"? I think IFRAMEs will, but I don't really want
to use them.

As mentioned, span will no create a new line since it is an "inline"
element.

If you apply display:inline to the <div>, it will remain on the same line.

--
Gus

[Stan Brown]

Sat, 11 Feb 2006 19:30:00 GMT from Tony A. <yo******@need.to.know>:

Hi all, quick question: if I have two adjacent elements (e.g. <IMG>
elements) without a <BR> inbetween, they will get rendered side by
side if there is space in the window, as you'd expect. However, two
adjacent <DIV> elements get rendered vertically.

Well, yes. <DIV> is a block-type element, like <P>.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Stan Brown]

Sat, 11 Feb 2006 21:29:06 GMT from Tony A. <yo******@need.to.know>:

Damn I hate debugging javascript!

So don't use it -- it's a loser for you and for your visitors.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

[Andy Dingley]

Stan Brown wrote:

Well, yes. <DIV> is a block-type element, like <P>.

That's not the best way to phrase it. <div> (by general default) has a
CSS "display" value of "block", as does <p>. <span> has the value of
"inline".

The idea of "<div> is a foo-type element" is a _HTML_ view of it, not a
CSS view. The difference is that whatever "type" <div> has is
fundamental to the HTML DTD and can't be changed (it's actually
related to their membership of the %block; entity and their content
model of %flow; - in contrast <span> is inline) By contrast the CSS
display property can have its value changed easily by any stylesheet.

Why should this matter? Why is the right terminology important?
Because the "HTML type" is rigid and unchanging, but the CSS property
is flexible.
As regards <img>, then this is an "inline replaced" element and is
neither "block" not "inline". It's similar to "inline block", but even
that's not quite the full story.
http://www.w3.org/TR/CSS21/visudet.h...eplaced-height

If you want to hack with the presentation of <img>, then do it with CSS
and the display property. Avoid the position property - I doubt very
much if that's what you're really after.