Can't figure out how to place anything beside a floated div - html

Question

I have a floated div that has a 200px margin from the right side, and I want to place a table on that empty space.
This is the CSS for the div:
#testo {
border-right: solid black 1px;
background-color: white;
margin-right: 200px;
text-align: justify;
padding: 7px;
float: left;
font-size: 14px;
}
But the table goes under it? Why?

Answer 1

The problem is that the margin of your floating element still takes up space. Therefore, another element in the flow cannot be in that space and gets pushed to the next line.
One solution is to absolutely position the table on the right so that it's removed from the flow.
#wrapper {
position: relative;
}
#wrapper div {
margin-right: 200px;
float: left;
}
table {
position: absolute;
top: 1em;
right: 0;
width: 190px;
border: 1px solid;
}
<div id="wrapper">
<div>Uno Dos Tres Quatro Cinco no Dos Tres Quatro Cinco no Dos Tres Quatro Cinco. Iti ni san shi, Iti ni san shi. Un deux trois quatre. Un deux trois quatre. Um dois três quatro. Um dois três quatro. Uno Dos Tres Quatro Cinco no Dos Tres Quatro Cinco no
Dos Tres Quatro Cinco. Iti ni san shi, Iti ni san shi. Un deux trois quatre. Un deux trois quatre. Um dois três quatro. Um dois três quatro</div>
<table>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>World</td>
</tr>
</table>
</div>

Answer 2

Because your div has an 100% width.
Set a width/max-width to this div and the table won't go under.

Answer 3

It is happening because the div has a display: block by default.
Regardless its size, it will take the full line on the page.
Try to set display:inline-block to the div and see if it works.