How to Put Div in P

How can I put DIV in P?

form the w3 site:

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

Putting div inside p is adding an extra p

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.

How to center a p element inside a div container?

You dont need absolute positioning
Use

p {
 text-align: center;
line-height: 100px;

}

And adjust at will...

If text exceeds width and goes more than one line

In that case the adjust you can do is to include the display property in your rules as follows;

(I added a background for a better view of the example)

div
{
  width:300px;
  height:100px;  
  display: table; 
  background:#ccddcc;  
}

p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell;   
}

Play with it in this JBin

Sample Image

Making a div inline with p tag

You need to make both elements inline:

Your html:

<p> Follow us on Facebook: </p>
<div id="follow-button"> Button </div>

Your css:

p { display: inline; }
div { display: inline; }

(Note you can also set them to 'inline-block' if you want them to act like block elements)

CSS | Place div after p tag

First of all your elements dont align because the img is wrapped with a p tag, which automatically changes the line.

<p>This is some text in a paragraph.</p> 
<div class="help-tip">
    <img src="balloon.jpg" width="300" />
</div>

To solve this you have to keep in mind that your container has to be able to contain both elements. So if your img is 300 px wide and your p element is 150px you need a container larger than 450px.A solution would be to wrap the two elements with a wrapper div and and add inline display in css.

HTML

<div class="wrapper">
    <span class="foo">This is some text in a paragraph.</span> 
    <div class="help-tip">
         <img src="balloon.jpg" width="300" />
    </div>
</div>

CSS

.foo{
 width:150px;
 positition:relative;
}
.wrapper{
     width:550px;
     positition:relative;
}
.help-tip{
    display:inline;   
}

UPDATE

This was not working because the paragraph text was wrappped in p element and it was going below by default. If you have to use the p element you can use position:absolute for the image to align it, or use span rather than p and use this jsFiddle .

Why can't the p tag contain a div tag inside it?

An authoritative place to look for allowed containment relations is the HTML spec. See, for example, http://www.w3.org/TR/html4/sgml/dtd.html. It specifies which elements are block elements and which are inline. For those lists, search for the section marked "HTML content models".

For the P element, it specifies the following, which indicates that P elements are only allowed to contain inline elements.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

This is consistent with http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, which says that the P element "cannot contain block-level elements (including P itself)."

Using div inside p tag loses my styles

I'd like to suggest you to use a span instead of a div, div are block elements in the other hand spans are inline elements and fit better in the context you want to use it.

And as someone mentioned above, you have an extra ; inside the div's class

how to change p 's position inside a div ?

add this

div.box {
    width: 50px;
    height: 30px;
    position:relative;
}
div.box p{
  margin:0;
  padding:0;
  position:absolute;
  bottom:0;
}