467,926 Members | 1,629 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,926 developers. It's quick & easy.

iframe width cannot be controled ?

hi guys,

I am trying to make some iframes fit into a div with variable width. The iframe must have a margin, and using a padding in the parent div element is not an option.

Unfortunately, the width:auto for iframe gives a preset width, and does not behave like for the div elements.

As a result, the iframe always seem to resize its container.

See the testcases below :

This is how it behaves when a div contains a div with width:auto > that's the result I want to achieve with an iframe
<div style="width:100px;background-color:blue">Container<div style="width:auto;margin:10px;background-color:white">content</div></div>

This is how it behaves when a div contains an iframe with width:auto
<div style="width:100px;background-color:red">Container<iframe style="width:auto;margin:10px" src=""></iframe></div>

This is how it behaves when a div contains an iframe with width:100% (the container becomes too big)
<div style="width:100px;background-color:red">Container<iframe style="width:100%;margin:10px" src=""></iframe></div>


Any ideas ?
Thanks,

Yohann
Jul 2 '08 #1
  • viewed: 4122
Share:
2 Replies
dlite922
Expert 1GB
may I ask why you need to use iFrame? maybe there's a different solution?

-Dan
Jul 6 '08 #2
hsriat
Expert 1GB
I tried, but could not get a CSS solution.

You may find this useful:
Expand|Select|Wrap|Line Numbers
  1. window.onload = function () {
  2.     var ifm = document.getElementsByTagName('iframe')[0];
  3.     ifm.style.width = ifm.parentNode.style.width;
  4. }
Jul 7 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Sticky | last post: by
reply views Thread by Martin | last post: by
5 posts views Thread by brad | last post: by
7 posts views Thread by pb | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.