Putting <div> inside <p> is adding an extra <p>
html
Solution
From the fine specification:
p – paragraph
[...]
Permitted contents
Phrasing content
And what is this Phrasing content?
Phrasing content:
Consists of phrasing elements intermixed with normal character data.
Normal character data is just that: unmarked up text. Phrasing elements are:
a or em or strong ... [a bunch of other elements none of which are div]
So, `<p><div></div></p>` is not valid HTML. Per the tag omission rules listed in the spec, the `<p>` tag is automatically closed by the `<div>` tag, which leaves the `</p>` tag without a matching `<p>`. The browser is well within its rights to attempt to correct it by adding an open `<p>` tag after the `<div>`:
<p></p><div></div><p></p>
You can't put a `<div>` inside a `<p>` and get consistent results from various browsers. Provide the browsers with valid HTML and they will behave better.
You can put `<div>` inside a `<div>` though so if you replace your `<p>` with `<div class="p">` and style it appropriately, you can get what you want.
Your reference at about.com disagrees with the specification at w3.org. Your reference is misleading you.
Problem
From http://webdesign.about.com/od/htmltags/p/aadivtag.htm In HTML 4, the DIV element cannot be inside another block-level element, like a P element. However, in HTML5 the DIV element can be found inside and can contain other flow content elements, like P and DIV. I have something like this inside a form ``` <p> <label...> <input...> </p> ``` but when Rails auto-generates an error_explanation div wrapping the input, the one paragraph turns into two, and I see this in Firebug: ``` <p> <label...> </p> <div...> <input...> </div> <p> </p> ``` Also, if I just add a simple ``` <p> <div> test </div> </p> ``` the same issue occurs (JSFiddle) and it gets rendered in the DOM as ``` <p> </p> <div> test </div> <p> </p> ``` Why? I later e-mailed the author of the article and she made the appropriate changes.