在div中的iframe不在html中顯示

Question

在下面的代碼中，左側div顯示正確，但該iframe中div的右側顯示在div之外。它顯示頂部，但我想在div空間顯示。

HTML

<div id="details"> 
     <div id="left"> 
     <h2>Bangalore</h2> 
    <img src="img/vcare_logo.png" width="100" height="83" alt="smoothy html5 template" hspace="50"/> 
    <p><b><strong>rgd</b></strong><br>gf560032</p> 
    </div> 
    <div id="right"> 
    <h2>Upcoming News</h2> 
<iframe id="NewsWindow" seamless src="news_win.htm" width="150" height="204" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" style="display: block; margin: 0 auto; padding: 0; border: #000000 1px solid;"></iframe> 
</div> 
    </div> 

CSS

#details { 
    overflow:auto; 
    width: 1050px; 
    border: 1px solid black; 
    background: gray; 
    margin: 2em auto; 
} 
#details h2{ 
    background-color: #A52A2A; 
    color: #FFFFFF; 
    font: 13px arial, sans-serif; 
    font-weight: bold; 
    text-align: center; 
    padding: 3px; 
} 
#left, #right { 
    width: 45%; 
    margin:5px; 
    padding: 1em; 
    background: white; 
} 

#left { 
    float:left; 

} 
#right { 
    width: 158px; 
    border: #000000 1px solid; 
    background-color: #339999; 
    text-align: center; 
    padding: 0px 2px 7px 2px; 
    position: absolute; 
    visibility: visible; 
    left: 100px; 
    top: 100px; 
    z-index:3; 
    float:right; 
} 

Answer 1

首先改變你的HTML代碼<p><b><strong>rgd</b></strong>��到<p><strong><b>rgd</b></strong>的。

，然後改變你的CSS爲#right，刪除絕對定位，使其左浮動爲：

#right { 
    width: 158px; 
    border: #000000 1px solid; 
    background-color: #339999; 
    text-align: center; 
    padding: 0px 2px 7px 2px; 
    visibility: visible; 
    left: 100px; 
    top: 100px; 
    z-index:3; 
    float:left; 
}