# iframes and relative positioning



## Highlander II (Feb 10, 2010)

...just what it says on the box.

I have a page I'm creating with two side-by-side iframes... 
(believe me, I wouldn't do it this way except that it makes for FAR easier updates for non-html-savvy ppl)

anyway - I want these two iframes to be positioned and sized 'relative' to the size of the browser window.

oh - and did I mention?  It has to work in IE6.  *sigh*

I can get the layout to work fine 'static' or 'absolute', but then if someone has a max'd window, it's kinda ugly and has a BIG empty space on one side.  Then, if I position one of the iframes (inside a div layer) relative to the right side of the window, it's fine until the window's max'd, then the two iframes separate like the parting of the red sea.  Again - kinda ugly.

What I'd like is for the left iframe to be one size and stay put, then have the right iframe expand or contract based on the size of the browser window.

If this requires javascript, I'm okay with that, as long as someone can point me to the code, b/c I have zero j/s knowledge aside from 'modify this element here'. XD

Thoughts?  Help?  Comments?  (aside from 'ditch IE6, b/c OMG, I *so* would, but it's what we use at work, so FAIL)


----------



## Lenny (Feb 10, 2010)

Usual questions from me - is the page online somewhere? If not, would you mind posting the source code that deals with the iFrames?

Are both frames in DIV layers?

My initial thought was to set the width of one iFrame to a real value (250px, for example), and the width of other to 100% (it's been a while since I did it, but I think that it will hit the other iFrame and not go any further).

If that doesn't work, try setting the width of both iFrames to 100%, and change the widths of the DIVs instead - one to the real value, the other to 100%.


----------



## Highlander II (Feb 11, 2010)

This is the code for the two iframes - they're both inside 'div's, but the div's don't have specific sizes defined, only the iframes do (at the moment)...


```
<div class="main" style="position:absolute; top:330px; left:10px;">
     <iframe scrolling="no" src="/current-week.mht" width="95%" height="800px">
  <p>Your browser does not support iframes.</p>
    </iframe>
</div>

<div class="main" style="position:absolute; top:330px; right:15px;">

<iframe scrolling="no" src="/details-home.mht" width="700px" height="800px">
  <p>Your browser does not support iframes.</p>
</iframe>
</div>
```


I tried sizing the 2nd iframe at 100%, but that squishes it over to the right side of the window and makes it the same size as the 1st iframe, which made no sense, but that's what it did.


----------



## Lenny (Feb 12, 2010)

H'okay. Assuming I've got them the right way round try this:


```
<div class="main" style="position:absolute; top:330px; left:10px;">
     <iframe scrolling="no" [COLOR="Blue"]src="http://www.google.com"[/COLOR] [COLOR="Red"]width="400px" [I][1][/I][/COLOR] height="800px">
  		<p>Your browser does not support iframes.</p>
    </iframe>
</div>

<div class="main" style="position:absolute; [COLOR="red"]left: 400px; [I][2][/I][/COLOR] top:330px; right:15px;">
    <iframe scrolling="no" [COLOR="blue"]src="http://www.google.com" [/COLOR][COLOR="red"]width="100%" [I][3][/I][/COLOR] height="800px"
    	<p>Your browser does not support iframes.</p>
    </iframe>
</div>
```

The URLs in blue are there simply so I could check it worked.

Things I've changed/added:

[1]/[2] - Hardcode this value so that you can use it in the second DIV [2]. This pushes the second DIV that many pixels over to the right. For a gap between the frames, increase [2].
[3] - fills the rest of the page horizontally.

You'll want to remove my numbers, obviously.


----------



## Highlander II (Feb 12, 2010)

Thanks, Lenny!

It works in Fx, Flock, IE Tab on Flock (b/c IE tab hasn't been updated for Fx 3.6) and IE8.0... running a check to see if it works okay in IE6 (which I don't have anymore at home).

I can code okay, just not so good at trouble-shooting my own code. *g*


----------

