Strange html error with paragraph

So i have this code:

<p id="item_1">
    <div class="background displayInline deleteItemFromCart" title="Delete item"></div>
    some text
</p>

Simple right? now what would happen if i would view the source in Chrome dev tools:

And as you can see for some reason <p> doesn't contain anything any more.

If i would try to remove div text would be back in <p> tag again, so my best guess would be that <p> can't contain any or just div elements?

EDIT Well it was stupid question, anyways now that i think about it i could have just used <ul> instead of <p> if i was going to build a list of things... Anyways thank you all for your help.

Answers


You're right, <p> can just contain inline elements and text, but <div> is a block element.

The inline elements are: a abbr acronym applet b basefont bdo big br button cite code del dfn em font i img ins input iframe kbd label map object q samp script select small span strong sub sup textarea tt var


This isn't strange. It's simply wrong markup :)

<p id="item_1">
    <span style="display:block" class="background displayInline deleteItemFromCart" title="Delete item"></span>
    some text
</p>

But while inline styles are bad you should put something like this to your master.css file.

p span {display:block}
// Or
#item_1 span {display:block}

The p tag cannot contain block-level elements, including itself. Source: http://www.w3.org/TR/html401/struct/text.html#h-9.3.1


Need Your Help

Generating CSV reports that have 1 million+ rows in ASP.NET

c# asp.net

I am seeking your advice with regards to generating CSV reports.

Can I compile VBA on workbook open?

excel vba activexobject

I am trying to find a way of compiling the code in VBA on workbook open. I can do this manually by opening the VBA environment, going into Debug and "Compile VBAProject" but was wondering if there ...