CODEWITHSUNDEEP
html
Mihir Chaturvedi
Mihir Chaturvedi

Reputation: 276

Making a div inline with <p> tag

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

Upvotes: 5

Views: 14532

Answers (4)

FDbomb
FDbomb

Reputation: 68

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)

Upvotes: 5

user4963716
user4963716

Reputation:

you can use this single line code

<p style="display:inline"> follow us on <div id="follow-button"    style="display:inline"> Button </div> </p>

Upvotes: 0

Mostafa Khodakarami
Mostafa Khodakarami

Reputation: 830

change your code as below:

<p style="display:inline-block;">Follow us on Facebook:</p><div style="display:inline-block;" id="follow-button">btn</div>

Upvotes: 1

rohit raut
rohit raut

Reputation: 53

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

Upvotes: 1

Related Questions