Text wraps around distant element - html

Question

Problem
I'm trying to create a dynamic info element that sits to the side of other linked DOM elements by setting a large margin. However, I'm stuck with a small issue as the text inside a p element that sits inside the containing div is flowing around the text in the preceding div, despite them not actually being nearby one another.
Fiddle of problem.
I've found that I can prevent this by making the preceding elements position absolute, however this presents its own problems and as such, if there were a better way to prevent the issue it would be much more ideal.
HTML
<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;
}
Edit: Updated fiddle with more context.

Answer 1

wrapper {
margin-top: 60px;
}
content {
background-color: #BBBBBB;
width: 300px;
}
content input {
float: right;
}
problem {
display: block;
float: left;
height: 16px;
line-height: 16px;
margin-bottom: 0px;
margin-top: 2px;
width: auto;
}
.control {
height: 30px;
width: auto;
}
container {
background-color: rgb(255, 150, 150);
display: block;
font-size: 14px;
height: 188px;
left: 300px;
margin-left: 15px;
padding: 4px;
position: absolute;
width: 200px;
}
container p {
color: rgb(216, 0, 12);
display: block;
font-size: 14px;
height: 96px;
line-height: 16px;
margin: 0;
width: 200px;
}