CODEWITHSUNDEEP
css
Jingshao Chen
Jingshao Chen

Reputation: 3485

display:inline-block in <p> and <div>

I put a div with display:inline-block inside a <p></p>. The div clears the left. But if I put it in a <div></div>, it follows the flow.

fiddle: http://jsfiddle.net/jDBxN/

Anyone know why? How to make <p> with inline-block behaves the same as <div>?

Browser is Chrome 29

Upvotes: 2

Views: 6846

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157324

Your HTML is invalid, you cannot nest a block level element inside p tag, consider using span instead

Demo

If you want, you can also nest a p tag inside div but the text will lose it's meaning, so better use p and nest span inside p.

From the Spec: Resource

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

Upvotes: 5

Related Questions