CODEWITHSUNDEEP
htmlcss
Jason
Jason

Reputation: 1977

<div> block drops out of a <p> block

Hi have a Paragraph block with the following style applied:

form.filters p {
    clear:both;
    padding: 5px 0 5px 0;
}

INSIDE the Paragragn, I have a Div with the following style:

form.filters .inputHolder {
    float:left;
}

When viewing the rendered page, the DIV seems to sit under the P, and when viewing the code in Chrome, the DIV acually is siting below the P..

Source Code:

<p>some stuff
  <div>more stuff<div>
</p>

Viewed in Chrome:

<p>some stuff</p>
<div>more stuff<div>

Can anyone tell me what is happening and what I can do to resolve this?

Many Thanks

Upvotes: 1

Views: 104

Answers (2)

Gary.S
Gary.S

Reputation: 7131

According to the spec the <p> element cannot contain "block-level elements (including P itself)". My guess is Chrome is just trying to be helpful here.

Source: http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

Upvotes: 1

Alohci
Alohci

Reputation: 83125

<div>s aren't allowed in <p>s. The HTML parser, when it sees the <div> tag, automatically closes the <p> element.

Use a <span> instead of a <div>.

Upvotes: 3

Related Questions