CODEWITHSUNDEEP
csshtmliframe
gta0004
gta0004

Reputation: 508

Iframe inside of div messing up other divs in parent div

So I have a layout such as this:

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

When I added an iframe to div3, it shifted div 2 down to just below the height of the iframe, while keeping div1 the same, hence

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

how do i fix this? this is my div code:

<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>

Upvotes: 0

Views: 609

Answers (1)

Mooseman
Mooseman

Reputation: 18891

Add margin: 0; padding: 0; float: left to div and #frame.

Upvotes: 1

Related Questions