1

I am trying to display a couple of iframes such that both of them take up the width of the screen, but the first iframe on the left is only wide enough to display all its contents. I have seen several solutions that use javascript, but I'm not understanding why this is necessary and I would really like to accomplish it using only CSS3.

I have been reading some of the CSS3 spec ( http://www.w3.org/TR/css3-box/#Calculating ) and although it is a bit difficult to understand, it seems like it should be using "shrink to fit" if I specify an auto width. However, it does not do this. For instance, in the code below, frame1.html contains the same contents as the first td in the second table, and frame2.html contains the same contents as the second td in the second table:

<!doctype html>
<html>
<head>
<title>Frame Test</title>
</head>
<body>
<table>
<tr>
<td><iframe src="frame1.html"></iframe></td>
<td><iframe src="frame2.html"></iframe></td>
</tr>
</table>
<table>
<tr>
<td>Hello</td>
<td>Goodbye ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</td>
</tr>
</table>
</body>
</html>

However, there is a bunch of extra space in the left iframe. Why? My best guess is that either somehow the iframe is inserting extra space in the outer tags (e.g. the html or body tags), which seems unlikely because firebug says most of the space is in the actual text, or else the auto width calculation is somehow different from iframe than it is for td. (A clear, easy to understand explanation of the algorithm involved would be nice!) I have tried various settings for width and height propogating all the way up to the html tag, but I can't seem to get anything to work.

Why isn't it shrinking to fit, so it only uses the space actually taken up by its elements?

Michael
  • 9,060
  • 14
  • 61
  • 123
  • Which browser are you using? Or is it always the same? I'd try to avoid using frames in 2012, but maybe you really need them. There might be some more about this here: http://stackoverflow.com/questions/755795/are-iframes-html-obsolete?answertab=votes#tab-top – Gorgsenegger Jul 08 '12 at 06:08
  • Firefox at the moment, although cross-browser will eventually be a concern: should support Safari and mobile platforms. Interestingly, I tried using object instead of iframe and got the exact same layout behavior. – Michael Jul 08 '12 at 06:15
  • Have been looking at the link you provided. I would be happy to use something other than iframes if that would solve the problem, but i'm not sure what that would be. usage case is a navigation page and lots of separate content pages which are unaware of the former. – Michael Jul 08 '12 at 06:25

1 Answers1

1

I imagine it's because an iframe doesn't actually contain its "contents" in an HTML/CSS sense.

It's easy to style things on the actual DOM, and that's what CSS is for. But an iframe is a window to a completely different DOM, independent of the parent. The parent page has no knowledge of the "contents" of the iframe and therefore can't style the dimensions of the iframe to match those contents.

As many, many people will suggest... You should really try to avoid frames. In my experience they're more trouble than they're worth. It's considerably easier to maintain the styles and behaviors within a single DOM.

David
  • 208,112
  • 36
  • 198
  • 279
  • Well, one reason I'm not sure I can avoid frames is that I'm trying to maintaining significant client-side state, but maybe this points to only having a single iframe so the left side follows the CSS constraints I specify. – Michael Jul 08 '12 at 06:37
  • 1
    @Michael: There are different ways to achieve levels of state. Admittedly, I'm curious what "significant client-side state" you're maintaining, because I suspect there may be better ways to accomplish the same requirements. But that's outside the scope of this question and would merit another, or potentially just open discussion in a chatroom. – David Jul 08 '12 at 06:40