Line breaks when using CSS "display:inline"

Question

I have successfully managed to get a <p> follow a <h> on the same line, however I wish to repeat this on a new line, but the next <h> is following on from the last <p> - what should I do?

I have tried various "clear" options, but none break the inline. I don't really want to use <br> or have an empty <p>, not overly happy to surround with <div> either.

Note - I have tried removing the inline from the second <h> element, and while that does place the <h> on a new line, the following <p> ends up on it's own new line too.

CSS

.inline {display: inline;}

.newline {clear: left;}

HTML

<h5 class="inline">Heading:</h5>

<p class="inline">Some text.</p>

<h5 class="inline newline">Next Heading:</h5>

<p class="inline">Some more text.</p>

This is the result I want to achieve:

Heading: Some text.

Next Heading Some more text.

but instead I am getting this:

Heading: Some text. Next Heading Some more text.

Any suggestions - trying to keep the code as simple and neat as possible.

[Update]

For the time being I am going to add an empty div as suggested by hafid2com, using the following (just adding height to achieve the desired result):

.clear { clear: both; display: block; content: ""; width: 100%; }

<div class="clear"></div>

As shown in the fiddle: http://jsfiddle.net/rxAnk/5/

Answer 1

Add this:

HTML:

<h5 class="inline">Heading:</h5>

<p class="inline">Some text.</p>

<div class="clear"></div>

<h5 class="inline">Next Heading:</h5>

<p class="inline">Some more text.</p>

CSS:

.inline {display: inline;}

.clear{
  clear: both;
  display: block;  
  content: "";
  width: 100%;  
}

Answer 2

There are a number of ways you can achieve the desired effect:

1) You could use float rather than display:

<style type="text/css">
    h5 {float:left;clear:left;}
    p {float:left;}
</style>

<h5>Heading:</h5>
<p>Some text.</p>
<h5>Next Heading:</h5>
<p>Some more text.</p>

2) You could use <strong> instead of <h5> and put your headings inside the <p> tags (thanks to @Ralph.m for pointing out that <h5> tags within <p> would be invalid):

<p><strong>Heading:</strong> Some text.</p>
<p><strong>Next Heading:</strong> Some more text.</p>

3) You could keep your display:inline; styles and wrap each <h5> and <p> in a <div>:

<style type="text/css">
    h5, p {display:inline;}
</style>

<div>
    <h5>Heading:</h5>
    <p>Some text.</p>
</div>
<div>
    <h5>Next Heading:</h5>
    <p>Some more text.</p>
</div>