Stylesheets - changing the width / height of iframe's

Author

changing the width / height of iframe's

yawnmoth

2007-11-14, 3:16 am

http://www.frostjedi.com/terra/scripts/demo/iframe.html

The div "main1" is 250px tall and takes up as much width as necessary
to fill up the rest of the screen.

I would like the iframe "main2" to do the same thing. Any ideas as to
why I am unable to do so?

yawnmoth

2007-11-15, 6:17 pm

On Nov 13, 10:58 pm, yawnmoth <terra1...@yahoo.com> wrote:
> http://www.frostjedi.com/terra/scripts/demo/iframe.html
>
> The div "main1" is 250px tall and takes up as much width as necessary
> to fill up the rest of the screen.
>
> I would like the iframe "main2" to do the same thing. Any ideas as to
> why I am unable to do so?

Setting the width as an attribute to 100% doesn't work because it'll
"spill over":

http://www.frostjedi.com/terra/scri...mo/iframe2.html

div blocks do this, too, however, div blocks take up the rest of the
width by themselves whereas iframe's do not seem to...

Any ideas as to what I can do to make "main2" take up all the width
after "menu" while, at the same time, still being on the right side of
"menu" (as opposed to underneath it)?

Ben C

2007-11-15, 6:17 pm

On 2007-11-15, yawnmoth <terra1024@yahoo.com> wrote:
> On Nov 13, 10:58 pm, yawnmoth <terra1...@yahoo.com> wrote:
>
> Setting the width as an attribute to 100% doesn't work because it'll
> "spill over":
>
> http://www.frostjedi.com/terra/scri...mo/iframe2.html
>
> div blocks do this, too, however, div blocks take up the rest of the
> width by themselves whereas iframe's do not seem to...

It's because iframes are replaced elements. Even if you make the iframe
"display: block" it doesn't take up the full width-- see CSS 2.1 10.3.4.

> Any ideas as to what I can do to make "main2" take up all the width
> after "menu" while, at the same time, still being on the right side of
> "menu" (as opposed to underneath it)?

Use another container. But you still won't be able to get the width you
want because of the border.

Absolute positioning is also ruled out (it actually does "work" in Firefox,
but I think that's a bug-- according to 10.3.8 the replaced element's
used width is calculated like that of a replaced element even if it's
absolutely positioned).

There is a solution in browsers that already support the CSS3 box-sizing
property, which is actually Firefox (if you call it -moz-boz-sizing),
Opera, and possibly Safari:

<div style="overflow: hidden">
<iframe id="main2" style="border: 1px solid; width: 100%;
height: 250px;
-moz-box-sizing:border-box;
box-sizing: border-box">
</iframe>
</div>

Chances are it won't work in IE.

Overflow: hidden is to make the div a block formatting context which
means its left edge moves to the right of the float. This is something
the spec says browsers "may" do, but FF, Opera and Konqueror all do.