DIV are not showing inside p tags

Question

I have a HTML like this:

<a class="nhr" href="javascript:void(0)" onclick="" >
    <p class="top_dr_profle">
        <div class="my_doc_pic">
            <img src="images/profile_img.png" />
        </div>
        <div class="my_doc_cont">
            <p>Josh Dobstaff, MD</p>
            <p>Hospitalist</p>
        </div>
        <div class="clear"></div>
    </p>
    <p class="primary">Make Primary</p>
</a>

Here you can see 3 <div/>s inside <p/> tag with class .top_dr_profle. But when I see it in firebug in mozilla the <div/>s are appearing outside of the <p/> tags. I have attached the screen shot too of firebug.

Answer 1

Use a validator.

<p> elements may not have <div> element child nodes.

Answer 2

paragraph tag can not contain block level elements. div is a block level element

Answer 3

You can use a span element inside parapragh elements so it would look like this:

<p class="top_dr_profle">
    <span class="my_doc_pic">
        <img src="images/profile_img.png" />
    </span>
</p>