Iframe mit margin in div

[Jannik]

Hallo Selfhtml-Community!

Ich schlage mich zur Zeit mit dem Design von einem WYSIWYG-Editor herum.
Der Code sieht etwa so aus:

<div id="main">
 <iframe id="editor" name="editor"></iframe>
</div>

dazu die CSS

div#main {
 width: 100%;
 border: 1px solid black;
}

iframe#editor {
 height: 100px;
 border: 1px outset;
 background: white;
 margin: 30px 50px;
 padding: 20px 10px;
}

So, und jetzt schaff ich es nicht, dass das Iframe das DIV zwar ausfüllt aber dennoch den margin beibehält. Wenn ich beim Iframe "width: 100%" setze, ist es genauso groß wie das DIV (wer hätte das gedacht). Aber ich weiß nicht, wie ich das anders hinbekommen soll. Es funktioniert, wenn ich beim DIV den padding ändere und im Iframe alles lösche. Aber so soll's und kann's nicht gehen.

Ich weiß schon wie man die Breite ausrechnet (margin+border+padding+width), aber ich weiß nicht, wie ich die Elemente formatieren muss, damit alles so aussieht wie gewünscht.

Ich bin für jeden Hinweiß dankbar

Jannik

[Steel]

Wenn ich beim Iframe "width: 100%" setze, ist es genauso groß wie das DIV (wer hätte das gedacht). Aber ich weiß nicht, wie ich das anders hinbekommen soll.

Wenn ich den Frame mit width:100% versehe ist er mit seinem Rand so gross wie das DIV. Das stimmt. Ich habe also zwischen DIV und Frame jeweils den definierten PLatz, dann kommt ein Rhamen, dann wider Freiraum und dann der Frame. Soll das nicht so sein? Ich dachte...