This question seems to get asked a lot, but I can’t find an answer that works for me.
Here is a link to an example (see also HTML below): http://biskup.biowiki.org/blah.html
I want the text to flow after the link, but it doesn’t. (I’m looking at this in Firefox & Chrome, on a Mac.)
I’d like to pre-empt some of the common replies I’ve seen, e.g. here Prevent linebreak after </div>
Regarding those answers:
- 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. http://biskup.biowiki.org/blah2.html
- “float:left” doesn’t work either
- 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
- 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
By the way, I can prevent this by adding “display:inline” to the preceding tag (see example), but that is an extremely awkward workaround
Here’s the HTML for my example:
<!DOCTYPE html>
<html>
<head>
<title>Dumb bug</title>
</head>
<body>
<p/>
<!-- 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 -->
<!-- p style="display:inline;"/ -->
Here is some text.
Here is a
<a href="#"> link</a>.
<div style="display:none;">
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.)
</div>
And here is some more text, that I want to flow on the same line after the link.
And some more.
<p/>
<p style="display:inline;"/>
Here is another paragraph.
</body>
</html>
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.
If I change the singleton p/ tags to this, as suggested by samiz and IsisCode in replies…
<p style="display:inline">
...
<p/>
…then I get the desired behavior (the text flows).
For the same example with more context on the dynamic behavior (i.e. what happens when the link is clicked).
This is how HTML works.
<p>is a block-line element, that is, it takes up its entire row. Your hidden div isn’t causing the line break, the preceding<p>element is.