iFrame with relative height in table layout.

Discussion in 'Web Design and Development' started by Taustin Powers, Jul 6, 2006.

  1. Taustin Powers macrumors regular

    Apr 5, 2005
    My current project page (also my first html project ever - I'm a newbie), is laid out in two columns, with the help of a table. In the second (right) column of the table, there currently is some text on the top (will be replaced with an image), and then an iframe for the main content.

    See here:

    The width of the iframe is defined and fixed.

    I would like for it to have a relative height (probably somewhere around 80%), so the bottom border will move up when you make the browser window smaller. That way the table height would be higher in browsers with high resolution, and smaller in low resolution, but it would never leave the visible part of the browser (unless you go lower than 800x600, then it's just too bad...).

    This method works just fine without the table layout:


    However, if I use that same code in the table layout, the iframe will just disappear, and the text be displayed a lot lower than usual:


    This is regardless of the percentage value I enter...

    What is happening here, and how can I fix it?

    This is my iframe tag:

    <iframe name="mainframe" frameborder="0" src="home.htm" height="75%" width="750"></iframe>
  2. wmmk macrumors 68020


    Mar 28, 2006
    The Library.
    i know it's a bit off topic, but why do you need that frame? the image displays perfectly fine w/o the frame. frames, unless when used very tastefully in circumstances when they are needed to make a page easier to view, are just distracting. ill post back if i find some examples of good use of frames.
  3. Taustin Powers thread starter macrumors regular

    Apr 5, 2005

    I want the top part and the side menu of the page to be there fixed, all the time, and only the content part to change and load when you click on menu items. In most other pages with a similar layout (without frames), the whole page (including the menu) will reload when you click on a menu item. I wanted to avoid that. I was thinking just frames at first, but didn't wanna chop up the entire page, so I tried the iframe, and with the exception of this variable height thing (which is really not a necessity), it's been working fine for me.

    EDIT: You are right, the image would be fine without, it's really for the content that replaces it when you click on the menu. Also, as a sidenote, in the final page the image will be resized to where you won't have the scroll bar on the right, so people won't even see the iframe, but just the image.

Share This Page