26

How can I put div in paragraph? I changed the display to inline, but the browser divide the base paragraph to two element, and div will not member of paragraph.

János
  • 32,867
  • 38
  • 193
  • 353

6 Answers6

37

form the w3 site:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

Gergely Fehérvári
  • 7,811
  • 6
  • 47
  • 74
20

no you cannot nest anything other than an inline element in a <p> if you want the code to validate

from the property def:

<!ELEMENT P - O (%inline;)* -- paragraph -->

I know it's hard to understand those recs at times, but the bit in brackets means the <p> can only contain inline elements

you can (and should) use a <span> inside a <p> and if required you could change it's CSS display property to block or inline-block and that would be perfectly valid, as CSS properties do not change the actual definitions of an element.. in your case it sounds like you need an inline element so just use a <span>

clairesuzy
  • 27,296
  • 8
  • 54
  • 52
  • 4
    This is not about whether your code validate or not. The more important thing is that it simply won't work in browsers - they'd automatically add the tag before the div. – duri Mar 26 '11 at 10:22
  • yep, but it's better to know the why, because it **can** work, there's usually always a way to get the CSS to display what you want, e.g. `p, div {display: inline-block;} p, div {display: inline !ie7;}` therefore better to explain the reasons why not – clairesuzy Mar 26 '11 at 10:29
  • No, it can't. It's the HTML parser what automatically encloses the paragraph, and it doesn't know what styles are applied to elements. Look at http://jsfiddle.net/rMHbg/ -

    is always closed before the

    .
     – duri Mar 26 '11 at 10:34
  • OK thx duri but I do know about auto-closing (elements with optional closing tags), my CSS in the comment above makes `div in p` **display** as the user would like but I would never suggest using that (unless no option to change HTML), to clarify.."validation" being important, HTML validation is usually a good first step as to why CSS will not display like you think it should without need to know how parsers work. – clairesuzy Mar 26 '11 at 10:40
6

Make a span, set it's style to a block.

<p>
  paragraph text
  <span style="display: block;">Span stuff</span>
</p>
Jens
  • 8,423
  • 9
  • 58
  • 78
Julian
  • 1,007
  • 1
  • 13
  • 23
2

You cannot nest a <div> element inside a <p> element according to the HTML standard. Consider why you even want to do this; it should never be necessary. A <p> element can only, and logically should only contain inline elements and text.

You
  • 22,800
  • 3
  • 51
  • 64
2

For those who think that validation is decisive, there are in fact two ways to get a div inside a p.

One way is to use dom manipulation in script. For example

var theDiv = document.createElement("div");
theDiv.appendChild(document.createTextNode("inserted"));
var theP = document.getElementsByTagName("p")[0];
theP.insertBefore(theDiv, theP.firstChild);

See it in action here: http://www.alohci.net/text/html/div-in-p-by-script.htm.ashx

The other way is to use XHTML and serve it with an XML content type. (No support in IE prior to IE9)

See that here : http://www.alohci.net/application/xhtml+xml/div-in-p-by-mime.htm.ashx

(Do note however, that while it is possible this way - it is still not valid.)

But You makes the vital point. Semantically, it's nonsense. You wouldn't put a block of something in the middle of a paragraph if you were writing text on to paper, so there should be no need to do it in HTML either.

Community
  • 1
  • 1
Alohci
  • 78,296
  • 16
  • 112
  • 156
0

Div is a block. Span is inline. Both of them are containers. You have to set display:inline for the div with css. Of course it won't pass validation so better use span ( inline ) to achieve the same thing.

johnlemon
  • 20,761
  • 42
  • 119
  • 178