DIV breaking out of P tags

In my Grails app, I have a GSP with the following markup:

<p class='foo'>
  <label>Email</label>
  <g:textField id="email" name="email" class="field required email"
      title="Please enter a valid email address" maxlength="50" value="${signUp?.email}"/>
  <g:eachError bean="${signUp}" field="email">
    <div class="fieldError"><g:message error="${it}"/></div>
  </g:eachError>
</p>

<label>Your Age:</label>

When the email field has an error, this generates the following HTML:

<p class="foo">
  <label style="width: 100px;">Email</label>
  <input id="email" class="field required email" type="text" value="" maxlength="50" title="Please enter a valid email address" name="email" style="width: 275px;">
</p>
<div class="fieldError" style="margin-left: 155px;">No email was provided</div>
<p></p>
<label style="width: 100px; vertical-align:middle;">Your Age:</label>

I can't figure out:

why <div class="fieldError> appears outside <p class='foo'>
where is <p></p> coming from?

Solution

<p> elements don't allow block level elements inside them, so that's why <div class="fieldError> is outside <p class='foo'>.

I'm not sure why you have an extra p tag below the first one. Can you post the generated HTML when you just use pure HTML?

A quick experiment shows that nested block elements mysteriously generate another <p> tag in FF6, Chrome 13 and Opera 11.51

This is the typed code:

<p>
    P
    <div>
        DIV1
        <div>
            DIV1a
        </div>
    </div>
</p>

And this is the output:

<p>P</p>
<div>
    DIV1
    <div>
        DIV1a
    </div>
</div>
<p></p>

It appears that each block level element (here a <div>) is pushed out of any <p> tags, and creates another <p> tag underneath it.

From the specification:

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