Is it possible, to flow a div container right next to the last line of a p?

Question

I'm creating a wordpress template. I'm using the_content(); to get the text written in the backend. Wordpress usually wrapps that inside a <p>. After the_content(); I want to have a link (that is not written into the WYSIWYG-Editor), and that link is inside a div. Now I want the <div> to flow right next to the p-wrapped text:

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna, sed diam.</p> <div>MY LINK</div>

Thanks!

`Is it possible, to flow a div container “inside” a p?` It's not inside in your example? — StudioTime, Jul 25 '16 at 06:24
Possible duplicate of [Why
tag can't contain
tag inside it?](http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it) — Hamed mayahian, Jul 25 '16 at 06:27
A `` would be more appropriate, since it's an inline element. — Scott, Jul 25 '16 at 06:30

score 4 · Accepted Answer · edited Jul 25 '16 at 06:32

4

I didn't understand your question correctly, but I think you mean this

.inline {
  display: inline;
}

<div>
  <p class="inline">Content is here</p>
  <div class="inline"><a href="">The link</a></div>
</div>

edited Jul 25 '16 at 06:32

Ismail Farooq

6,309
1
27
47

answered Jul 25 '16 at 06:24

Mark Perera

662
5
15

Thats it! Thank you! – Skalibran Jul 25 '16 at 06:27
1

the parent element should not be P tag browser will not render div inside p check in the inspect element by the way i have updated – Ismail Farooq Jul 25 '16 at 06:28
I thought that he said both were inside a p. Initially I also put div – Mark Perera Jul 25 '16 at 06:29
ok but you cannot take div or p tag inside P tag you have to take span or something else inline element – Ismail Farooq Jul 25 '16 at 06:31

score 0 · Answer 2 · answered Jul 25 '16 at 06:41

you can use css display: inline and display: inline-block to do that

Using inline-block

     <p style="display: inline-block;"> Content of p tag </p>
    <div style="display: inline-block;"> <a href="#">Content of div tag </a></div>

Using inline:

<p style="display: inline;"> Content of p tag </p>
<div style="display: inline;"> <a href="#">Content of div tag </a></div>

Is it possible, to flow a div container right next to the last line of a p?

2 Answers2