The code snippet below shows a div with the left side displaying correctly, but the right side within an iframe is appearing outside of the boundary of the div. The content on the right is positioned at the top instead of being displayed within the space of the 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;
}