div with background-image on the same line as some span, while being inside a p

Question

I have the following HTML markup:

<p><span>Hello</span>&nbsp;<div class="show" /></p>

Now the div has the background-image property set to some image:

.show {
    background-image: url(http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png);
    background-size: contain;
    width: 40px;
    height: 40px;
    display: inline-block;
}

I can't seem to get the div (or, rather, the image) on the same line as the span because of the p around the both of them. Is this even possible while keeping the p?

Here is a JSFiddle showcasing the problem

http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it — akash, Jul 01 '15 at 12:18

score 2 · Accepted Answer · answered Jul 01 '15 at 12:18

2

You shouldn't put div elements inside <p> elements. One simple way to fix it would be to replace div for span.

<p><span>Hello</span>&nbsp;<span class="show" /></p>

answered Jul 01 '15 at 12:18

Julien Grégoire

16,864
4
32
57

Ah, I didn't know that and VS suppressed the warning about the `div` inside a `p` because both were inside an `ItemTemplate`... but good to know I can just use a `span` instead. Now, I've used a lot of different elements to get this to work ;) – InvisiblePanda Jul 01 '15 at 12:26

score 0 · Answer 2 · answered Jul 01 '15 at 12:26

You can set display:inline-block propery to P tag

<p><span>Doe, John</span>&nbsp;<div class="show"></div></p>

.show {
    background-image: url(http://doc.jsfiddle.net/_downloads/jsfiddle-logo.png);
    background-size: contain;
    width: 40px;
    height: 40px;
    display: inline-block;
}
p{
    display: inline-block;
}

You can check here JSFIDDLE

div with background-image on the same line as some span, while being inside a p

2 Answers2