Div überlappend Positionieren

Guten Tag allerseits!

Erneut habe ich ein kleines Javascript, bzw. CSS Problem und da ich mich in diesem Bereich noch nicht sehr gut auskenne und mir das letzte Mal schon so gut geholfen wurde, poste ich es gleich hier (SuFu brachte kein Ergebnis):

Ich habe ein Standard - 2-Spaltiges Layout, welches durch ein CSS verwirklicht wird. Per Javascript erzeuge ich nun ein div-Element, Welches in der rechten Spalte dargestellt werden soll. Natürlich wäre es kein Problem, dem Element einen Top und einen Left Wert zuzuweisen, damit es an der richtigen Stelle steht. Wenn man dies jedoch macht, skaliert die Box nicht mit der Größe des Fensters, wie es das restliche Bild tut (Margins in % angegeben).

Per Margin-Wert bekomme ich das Bild zwar an die richtige Stelle, jedoch ist der Wert dann negativ und die Box skaliert genau verkehrt herum im Gegensatz zum restlichen Bild, das heisst es verschiebt sich bei geringer werdender Browsergröße nach links unten.
Die Box wird per body.appendChild eingebunden.

Nun zu meinen konkreten Fragen, ich hoffe es konnte mir jemand so weit folgen, ansonsten siehe Bild

- Kann ich die Box eventuell nicht in den Body übernehmen, sondern zum Beispiel document.getElementById['inhaltsbereich'].appendChild(box); verwenden, damit die Standardposition der Box sofort richtig ist? Den obrigen Code hab ich natürlich ausprobiert, funktioniert hat es leider nicht.

- Hat jemand eine Idee für eine CSS-Einstellung, mit der mir geholfen werden könne?

Falls mein text unklar ist, bitte rügt mich jederzeit, damit ich eventuelle Unklarheiten beseitigen kann.

Vielen Dank im vorraus,
mit freundlichen Grüßen
Northon