Question

My page layout is structured in tables (I know this is not ideal – I inherited it).

I am trying to display an iframe in a div with the following code inside a table cell () as below:

<td class="style24" style="width: 800px">
<div id='outerdiv '>
<iframe src="www.google.com" id='inneriframe' scrolling=no >< /iframe>
</div>
</td>

The issue is the iframe causes the table cell to grow and then pushes the content on the right of the page off the page!

Is there a way to limit the size of the iframe that’s displayed that won’t make the table cell grow? Limiting the width of the iframe doesn’t seem to have an effect, as soon as the div content is placed in the td the effect occurs.

Answer 1

You can try adding the width and/or height to the iframe and #outerdiv (add overflow-x to the #outerdiv as a failsafe):

<td class="style24" style="width: 800px">
<div id='outerdiv' style="width:800px; overflow-x:hidden;">
<iframe src="www.google.com" width="800" frameborder="0" id='inneriframe' scrolling=no >< /iframe>
</div>
</td>