Line breaks when using CSS "display:inline"

css

Solution

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%;  
}

Problem

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/

Original source