css - div 内の iframe が親 div の他の div をめちゃくちゃにする

Question

だから私はこのようなレイアウトを持っています:

<--------------------------------parent div------------------------------------->
<---div1---><---------------div2----------------><-------------div3------------->

iframe を div3 に追加すると、div1 は同じままで、div 2 が iframe の高さのすぐ下に移動したため、

<--------------------------------parent div------------------------------------->
<---div1--->                                     <-------------div3------------->
                                                                 <-
                                                             iframe height
                                                                 ->
             <---------------div2---------------->

どうすればこれを修正できますか? これは私のdivコードです:

<style>
div {padding:5px;}
#frame {width: 400px;height:800px;border: none;-moz-transform: scale(0.9);
    -moz-transform-origin: 0 0;-o-transform: scale(0.9);-o-transform-origin: 0 0;
    -webkit-transform: scale(0.9);-webkit-transform-origin: 0 0;
}
</style>
<div>
     <div style="float:left; width:16.5% ">.... </div>
     <div style="display:inline-block;width:30%; ">....</div>
     <div style="display:inline-block; width:28.5%; "> <iframe> </iframe></div>
</div>
<div style="clear:both "></div>

Answer 1

とに追加margin: 0; padding: 0; float: leftします。div#frame