Menu
My container element is a <span> and I want to display a <div> element inside it. How can I add a <div> inside a <span> without making the <div> display: inline;?
<span>
<div>Content goes here</div>
</span>
454
The phrasing elements can only contain other phrasing elements, for example, you can't put div inside span.
First, we will create a basic HTML code for the div elements and apply different CSS styling to make it display inline. CSS properties: In this article, we will use below CSS properties. Display: We will use display: flex and display: inline-block property to show div elements inline.
HTML <span> TagIt is often used inside a <p> element to apply styles to a specific part of a paragraph. For instance, you could use <span> to change the color of a word in a paragraph.
Change the span to display block? But it makes no sense at all, if you need a block inside, then replace the span with a div. Your document won't validate this way either and behavior in different browsers is kinda unpredictable...
194
What I ended up doing when I first thought I needed this was changed the span to a div. But instead of leaving the div as a display:block (default) I specified the style to be display:inline-block, this allowed the block so the inner div could be used, but still allowed me to put more then one of the divs on the same line.
<div style="display:inline-block">
<div>context on top</div>
<div>context on bottom</div>
</div>
<div style="display:inline-block">
<div>context on top</div>
<div>context on bottom</div>
</div>
This should put 2 blocks next to each other (with out the use of float) and inside of each block there should be 2 blocks one on top of each other. Also you can specify the width on the style to get it to look the way you want.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
