Making a div inline with <p> tag

Question

For my website, I've been wanting to add a Facebook Follow button. I want it to look something like this:

Follow us on Facebook: [THE FOLLOW BUTTON]

Note that the <p> tag and the <div> tag of the button should be inline.

I'm using the following code:

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

When using the code, it's not rendering properly and the Follow button is always displayed below the <p> tag

Answer 1

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)

Answer 2

Its because <div> always take 100% width. Why don't you take <button> in place of <div>.