Why can't I embed divs in a <p>?

[listerofsmeg01]

Sorry if this is a dumb question, but with the following code:

<p>
<div>Block1</div>
<div>Block2</div>
</p>

For xhtml1-strict.dtd, the W3C validator gives:
document type does not allow element "div" here; missing one of
"object", "ins", "del", "map", "button" start-tag.

Whereas with:
<div>
<div>Block1</div>
<div>Block2</div>
</div>

Is it quite happy :-/

I thought both <divand <pwere block elements, but I'm obviously
missing some fundamental difference :-/

[Benjamin Niemann]

Hello,

li************@ hotmail.com wrote:

Sorry if this is a dumb question, but with the following code:

<p>
<div>Block1</div>
<div>Block2</div>
</p>

For xhtml1-strict.dtd, the W3C validator gives:
document type does not allow element "div" here; missing one of
"object", "ins", "del", "map", "button" start-tag.

Whereas with:
<div>
<div>Block1</div>
<div>Block2</div>
</div>

Is it quite happy :-/

I thought both <divand <pwere block elements, but I'm obviously
missing some fundamental difference :-/

Being a 'block' element (vs. 'inline') only tells *where* the element can be
used, not which elements it can contain.
The content model for P only allows inline elements, whereas DIV can contain
both block and inline elements.
HTH

--
Benjamin Niemann
Email: pink at odahoda dot de
WWW: http://pink.odahoda.de/

[Harlan Messinger]

li************@ hotmail.com wrote:

Sorry if this is a dumb question, but with the following code:

<p>
<div>Block1</div>
<div>Block2</div>
</p>

For xhtml1-strict.dtd, the W3C validator gives:
document type does not allow element "div" here; missing one of
"object", "ins", "del", "map", "button" start-tag.

Whereas with:
<div>
<div>Block1</div>
<div>Block2</div>
</div>

Is it quite happy :-/

I thought both <divand <pwere block elements, but I'm obviously
missing some fundamental difference :-/

They are both block elements, but all block elements aren't the same in
all ways.

In what way is your chunk of content that includes two block elements
logically a single paragraph? When you read a paragraph in a book or a
report, it's all one block, right?

[Ed Seedhouse]

On 10 Nov 2006 06:40:32 -0800, li************@ hotmail.com wrote:

>Sorry if this is a dumb question, but with the following code:

<p>
<div>Block1</div>
<div>Block2</div>
</p>

For xhtml1-strict.dtd, the W3C validator gives:
document type does not allow element "div" here; missing one of
"object", "ins", "del", "map", "button" start-tag.

Only inline elements are allowed inside a <pelement.

>Whereas with:
<div>
<div>Block1</div>
<div>Block2</div>
</div>

Is it quite happy :-/

Yes, because <divis designed for grouping block elements.

>I thought both <divand <pwere block elements, but I'm obviously
missing some fundamental difference :-/

They are both block elements. That doesn't mean they are equivalent
elements. <oland <ulare block elements too, but they can only
contain <lielements.

Semantically the <pis meant to contain a paragraph, a single thought
in text (more or less). <divhas little semantic meaning except to
group other block elements for purposes such as providing a hook for CSS
or javascript.

[listerofsmeg01]

Semantically the <pis meant to contain a paragraph, a single thought
in text (more or less). <divhas little semantic meaning except to
group other block elements for purposes such as providing a hook for CSS
or javascript.

OK, so why is it necessary to contain <inputelement s within a
paragraph?

This is what caused my problems in the first place. I had aligned
various controls in my form by encasing them in <div>s and floating
etc.

The W3C validator complained that all my <inputelement s shouldn't be
there because they weren't contained by a <p>

Wrapping the lot with a <pcaused the error that started this thread.

I could replace all the <div>s with <p>s, but then all the margins will
be messed up (I don't WANT them in paragraphs!)

Thanks for your help

[Andy Dingley]

li************@ hotmail.com wrote:

I thought both <divand <pwere block elements,

There's no such thing as a simple "block element". There are elements
that are themselves treated as block (or not), and elements that can
contain block elements (or not). Usually these are the same for each
element, but if you read the DTD for <pthen you'll see that <pis
one, but can only contain inlines.

This is all fixed and unchangeable. However there's also <span>
(happily sits inside a <p>) and you _can_ change the CSS behaviour of
this with display:block; so that it looks like a <div>.

It's also somewhat curious as to what placing a block element inside a
paragraph means anyway. It might even be better to use <divfor the
outer container, rather than to stretch <ponto something that's not
really a paragraph.

[Bergamot]

li************@ hotmail.com wrote:

>
The W3C validator complained that all my <inputelement s shouldn't be
there because they weren't contained by a <p>

Are you sure it said they *had* to be contained by <p>, or was that only
a suggestion? Form elements do need to be contained by a block element,
but it doesn't have to be <p>. Try fieldset, div or table.

--
Berg

[Ben C]

On 2006-11-10, li************@ hotmail.com <li************ @hotmail.comwro te:

>

>Semantically the <pis meant to contain a paragraph, a single thought
in text (more or less). <divhas little semantic meaning except to
group other block elements for purposes such as providing a hook for CSS
or javascript.

OK, so why is it necessary to contain <inputelement s within a
paragraph?

This is what caused my problems in the first place. I had aligned
various controls in my form by encasing them in <div>s and floating
etc.

The W3C validator complained that all my <inputelement s shouldn't be
there because they weren't contained by a <p>

Wrapping the lot with a <pcaused the error that started this thread.

I could replace all the <div>s with <p>s, but then all the margins will
be messed up (I don't WANT them in paragraphs!)

Do you mean replace the <p>s with <div>s?

You can always set <divto have the same margins as <phas by default.

e.g.

div.p
{
margin: 1.12em 0;
}

<div class="p">
</div>

for example, although "p" may not be the best name to use.

If you're not using <pto mark a "thought", or something resembling a
"paragraph" in an abstract sense, just use <divinstead.

The fact that the HTML DTD doesn't allow, for example, "block" elements
inside "inline" elements seems to me a bit of an anachronism. In today's
world, HTML isn't supposed to be describing blocks and lines, but
abstract things like "lists" and "tabular data". It's CSS's problem if
it doesn't like a display: block element inside a display: inline
element (although actually it is required to tolerate just about
anything).

HTML has all kinds of requirements about what you can and can't nest
inside what. CSS on the other hand only cares what styles apply, and as
far as it's concerned, tags are nothing more than indices into the bag
of selectors it picks up from the stylesheets and style elements. It
allows any structure you like (although certain things are a bad idea,
like absolutely positioned table cells).

So if you're getting validation errors that are meaningless to you, just
start watering things down into a div soup.

In fact the validation errors probably don't matter a lot in practice
since modern browsers will allow invalid structure anyway and render
according to the styles. But you should probably forget I said that.