Challenge
I'm currently working on a project where I need to place an interactive info box next to other elements in the DOM. However, I've encountered an issue with text from one paragraph wrapping around the text in a separate div, even though they are not close together in the layout.
You can see the issue demonstrated in this Fiddle.
I have found a workaround by making the preceding paragraphs position absolute, but this solution comes with its own set of problems. If there is a better way to address this issue, I would greatly appreciate any suggestions or insights.
Here is the HTML and CSS code snippets:
<br>
<br>
<p id="problem">Text which will cause word wrap.</p>
<div id="container">
<p>Text which is being wrapped around the text, despite the fact that the text is not nearby</p>
</div>
CSS
#problem {
display: block;
float: left;
height: 16px;
line-height: 16px;
margin-bottom: 0px;
margin-top: 2px;
width: auto;
}
#container {
background-color: rgb(255, 150, 150);
display: block;
font-size: 14px;
height: 188px;
left: 220px;
margin-left: 15px;
margin-top: -25px;
padding: 4px;
position: relative;
top: -22px;
width: 200px;
}
#container p {
color: rgb(216, 0, 12);
display: block;
font-size: 14px;
height: 96px;
line-height: 16px;
margin: 0;
width: 200px;
}
Update: The updated fiddle now includes more context for clearer understanding.