purple11111 purple11111 - 1 month ago 6
CSS Question

Have multiple divs inline using the full width of the page (like continuous text.)

I got me a issue with two divs for some reason they do not want to show their content inline.

I uploaded the full code in question to jsfiddle: https://jsfiddle.net/w76pswwn/

As you can see in the fiddle those

<div class="storymode inline">
<span class="action-Cutscene">
<p>
On a cold winter night a epic tale between Blanka and Colossus came to a end during a powerful battle on top of a New York City Skyscraper.&nbsp;
</p>
</span>
</div>

<div class="storymode inline">
<span class="action-Cutscene">
<p>
On a cold winter night a epic tale between Blanka and Colossus came to a end during a powerful battle on top of a New York City Skyscraper.&nbsp;
</p>
</span>
</div>


display like this:



On a cold winter night a epic tale between Blanka and Colossus came to a end during a powerful battle on top of a New York City Skyscraper.

On a cold winter night a epic tale between Blanka and Colossus came to a end during a powerful battle on top of a New York City Skyscraper.

but i want:



On a cold winter night a epic tale between Blanka and Colossus came to a end during a powerful battle on top of a New York City Skyscraper. On a cold winter night a epic tale between Blanka and Colossus came to a end during a powerful battle on top of a New York City Skyscraper.

I tried
inline, inline-block
and
float
but I am missing something. But what?

Thanks in advance for helping!

PS: I cannot change the HTML Structure. At least not easily! So please make suggestions that can work with this structure.

Answer

the p elements have to be inline otherwise they'll override the property.

fiddle: https://jsfiddle.net/byuqbqLL/2/