iframe auto sizing to browser window size

i have a web page with 2 iframes in it side by side

the right iframe must be a specidied width

the left iframe i want it to take up the rest of the window width no matter what they resize it to or what resolution that they run

how do i do this please ?
LVL 1
sanctifyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Lee W, MVPTechnology and Business Process AdvisorCommented:
I'd put them in tables and specify the table column and row widths and heights.

<table>
<tr height=640>
    <td width=300><iframe></iframe></td>
    <td width=*><iframe></iframe></td>
</tr>
</table>

I haven't tried it, but I think it will work.
0
sanctifyAuthor Commented:
doestn work

the iframe needs to be individually variably sized as well as the table dimensions

using the wilcard variable in conjunction with specified iframe width doesnt work for me inside or outside of tables

again .. the right iframe needs to be a specified width and the left iframe needs to be the res of the space in the browser

thank you for trying though
0
nurbekCommented:
try

<table width="100%" border="1">
<tr>
    <td width="100%"><iframe width="100%" src="file1.asp"></iframe></td>
    <td width="200px"><iframe width="200px" src="file2.asp"></iframe></td>
</tr>
</table>
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

dakydCommented:
How about using a bit of javascript to resize your iframes?  It gives you more flexibility than using tables, and should make your maintenance a bit easier.  I assumed the right frame was 200px, but you can change the values accordingly.  Hope that helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
#container iframe {
  float: left;
  padding: 0;
  margin: 0;
}

#right {
  width: 200px;
}
</style>
<script type="text/javascript">
window.onload = myResize;
window.onresize = myResize;

function myResize()
{
  var totalWidth;
  if (document.documentElement && document.documentElement.clientWidth)
    totalWidth = document.documentElement.clientWidth;
  else if (document.body)
    totalWidth = document.body.clientWidth;

  // subtract a bit more than 200 to account for borders and padding
  document.getElementById("left").style.width = (totalWidth - 225) + "px";
}
</script>
</head>

<body>
  <div id="container">
    <iframe src="left.html" id="left"></iframe>
    <iframe src="right.html" id="right"></iframe>
  </div>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Wayne BarronAuthor, Web DeveloperCommented:
sanctify:

  If you have a demo code made up of what you are trying to do.
i might be able to assist you with it.
Or a page that shows what it is that you are trying to accomplish.

Do you want the "IFrame" to take up the Entire IE Window?
Is that what you are trying to accomplish?

Carrzkiss
0
sanctifyAuthor Commented:
nurbek and daykid,

will try your suggestions out tonight ..thanks for your efforts, they are greatly appreciated


carrzkiss,

as previously stated, 2 frames side by side on a web page .. the RIGHT FRAME must be a SPECIFIED WIDTH in pixels (graphic skin for an embedded object file)

LEFT FRAME msut take up the rest of the page width

2 side by side iframes
0
sanctifyAuthor Commented:
dakyd

simply put ... YOU ROCK !

thanks alot !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

what can i change or add here to set 100% height on each frame ?
0
sanctifyAuthor Commented:
oh wait .. i get a script error

Line:    23
Char:   3
Error:  Invalid Arguement
Code:  0

thanks !
0
sanctifyAuthor Commented:
ok it was a copy and paste error ... forget the error
0
sanctifyAuthor Commented:
so sorry, nurbek, yours does work, but dakyd's script allows me to do so much more with my layout and formatting .

nice works and thank you all
0
dakydCommented:
>> what can i change or add here to set 100% height on each frame ?
You have to add a little more scripting in order to do this, a style of height=100% doesn't mean much.  Give this a shot.  Hope it helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style type="text/css">
#container iframe {
  float: left;
  padding: 0;
  margin: 0;
}

#right {
  width: 200px;
}
</style>
<script type="text/javascript">
window.onload = myResize;
window.onresize = myResize;

function myResize()
{
  var totalWidth;
  if (document.documentElement && document.documentElement.clientWidth)
    totalWidth = document.documentElement.clientWidth;
  else if (document.body)
    totalWidth = document.body.clientWidth;

  var totalHeight;
  if (self.innerHeight)
    totalHeight = self.innerHeight;
  else if (document.documentElement && document.documentElement.clientHeight)
    totalHeight = document.documentElement.clientHeight;
  else if (document.body)
    totalHeight = document.body.clientHeight;

  // subtract a bit more than 200 to account for borders and padding
  var leftFrame = document.getElementById("left");
  var rightFrame = document.getElementById("right");
  leftFrame.style.width = (totalWidth - 225) + "px";
  leftFrame.style.height = totalHeight + "px";
  rightFrame.style.height = totalHeight + "px";
}

function getY(obj)
{
  var temp = obj;
  var answer = 0;
  while (temp.offsetParent)
  {
    answer += temp.offsetTop;
    temp = temp.offsetParent;
  }
  return answer;
}
</script>
</head>

<body>
  <div id="container">
    <iframe src="left.html" id="left"></iframe>
    <iframe src="right.html" id="right"></iframe>
  </div>
</body>
</html>
0
sanctifyAuthor Commented:
yea this rocks thanks alot !
0
dakydCommented:
You're welcome, glad to hear you got what you wanted.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.