Databases
StackOverflow2013
Postsdbo
POLine breaks when using CSS "display:inline"
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLine breaks when using CSS "display:inline"
    text
    copied!<p>I have successfully managed to get a <code>&lt;p&gt;</code> follow a <code>&lt;h&gt;</code> on the same line, however I wish to repeat this on a new line, but the next <code>&lt;h&gt;</code> is following on from the last <code>&lt;p&gt;</code> - what should I do?</p> <p>I have tried various "clear" options, but none break the inline. I don't really want to use <code>&lt;br&gt;</code> or have an empty <code>&lt;p&gt;</code>, not overly happy to surround with <code>&lt;div&gt;</code> either.</p> <p>Note - I have tried removing the <code>inline</code> from the second <code>&lt;h&gt;</code> element, and while that does place the <code>&lt;h&gt;</code> on a new line, the following <code>&lt;p&gt;</code> ends up on it's own new line too.</p> <p>CSS</p> <pre><code>.inline {display: inline;} .newline {clear: left;} </code></pre> <p>HTML</p> <pre><code>&lt;h5 class="inline"&gt;Heading:&lt;/h5&gt; &lt;p class="inline"&gt;Some text.&lt;/p&gt; &lt;h5 class="inline newline"&gt;Next Heading:&lt;/h5&gt; &lt;p class="inline"&gt;Some more text.&lt;/p&gt; </code></pre> <p>This is the result I want to achieve:</p> <blockquote> <p><strong>Heading:</strong> Some text.</p> <p><strong>Next Heading</strong> Some more text.</p> </blockquote> <p>but instead I am getting this:</p> <blockquote> <p><strong>Heading:</strong> Some text. <strong>Next Heading</strong> Some more text.</p> </blockquote> <p>Any suggestions - trying to keep the code as simple and neat as possible.</p> <p>[Update]</p> <p>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):</p> <p><code>.clear { clear: both; display: block; content: ""; width: 100%; }</code></p> <p><code>&lt;div class="clear"&gt;&lt;/div&gt;</code></p> <p>As shown in the fiddle: <a href="http://jsfiddle.net/rxAnk/5/" rel="nofollow">http://jsfiddle.net/rxAnk/5/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload