title: How do I prevent a hidden div from creating a linebreak?
body: <p>This question seems to get asked a lot, but I can't find an answer that works for me.</p>
  
  <p>Here is a link to an example (see also HTML below): <a href="http://biskup.biowiki.org/blah.html" rel="nofollow noreferrer">http://biskup.biowiki.org/blah.html</a></p>
  
  <p>I want the text to flow after the link, but it doesn't. (I'm looking at this in Firefox &amp; Chrome, on a Mac.)</p>
  
  <p>I'd like to pre-empt some of the common replies I've seen, e.g. here <a href="https://stackoverflow.com/questions/3576605/prevent-linebreak-after-div">Prevent linebreak after &lt;/div&gt;</a></p>
  
  <p>Regarding those answers:</p>
  
  <ul>
  <li>I can't set the div's display property to "inline" or "inline-block", because I really want it to be hidden. And anyway this doesn't seem to work, for me: see e.g. <a href="http://biskup.biowiki.org/blah2.html" rel="nofollow noreferrer">http://biskup.biowiki.org/blah2.html</a></li>
  <li>"float:left" doesn't work either</li>
  <li>I can't use a span element, because I really want this to be a div, so I can use it as a popup element</li>
  <li>Since it's a popup element and will eventually be detached/repositioned/reattached by the JavaScript code that pops it up (which will be triggered by clicking on the link right next to the div), I could technically put the div somewhere else in the document (e.g. right at the end); it then wouldn't interrupt the flow; but since this HTML is dynamically generated, it's very convenient to create the div right next to the link that reveals it, as in this example</li>
  </ul>
  
  <p>By the way, I <em>can</em> prevent this by adding "display:inline" to the preceding  tag (see example), but that is an extremely awkward workaround</p>
  
  <p>Here's the HTML for my example:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Dumb bug&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;p/&gt;
  &lt;!-- the following (commented-out) line prevents the div from starting a newline; still seeking a better solution that is local to the div or adjacent anchor element --&gt;
  &lt;!-- p style="display:inline;"/ --&gt;
  Here is some text.
  Here is a
  &lt;a href="#"&gt;  link&lt;/a&gt;.
  &lt;div style="display:none;"&gt;
    This text is inside the hidden div, and should not be shown.
    (A separate piece of code will detach/reattach/position/show this div as a popup, but it's convenient to generate it in the same place as the link.)
  &lt;/div&gt;
  And here is some more text, that I want to flow on the same line after the link.
  
  And some more.
  
  &lt;p/&gt;
  &lt;p style="display:inline;"/&gt;
  Here is another paragraph.
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Edited to add: the singleton p/ tags are sloppy syntax that most browsers forgive (interpreted as p ... p/ enclosing the div elements), and this was hiding a basic misunderstanding on my part of how the div was inheriting layout style from its parent p.</p>
  
  <p>If I change the singleton p/ tags to this, as suggested by samiz and IsisCode in replies...</p>
  
  <pre><code>&lt;p style="display:inline"&gt;
  ...
  &lt;p/&gt;
  </code></pre>
  
  <p>...then I get the desired behavior (the text flows).</p>
  
  <p>For the same example with more context on the dynamic behavior (i.e. what happens when the link is clicked).</p>