problems with an iframe!!

[zedmedia]

Hey guys, first post here...

I'm not great at html as normally i just use flash to build my sites, but for a new site i'm developing for a client i need to load a html page inside another so I'm using an iframe, but the iframe can only be given one position on the page and if the window is resized the iframe stays in the same place while everything else moves. Have a look here at www.kc.zedmedia.org to see what i mean. So all i want is to load the pages into the bottom section, it is supposed to be a very simple site and i think this is the best way to do it, but if anyone has any suggestions of what to do i'd happily take them on board, you are welcome to have a look at my poor attempt at coding to see if theres anything that can be done.

I hope u guys can help me

Cheers

[Paul O'B]

Hi,

If you want to place an element absolutely and have it move with the parent element then the parent element needs to have a position:relative set (without co-ordinates).

This will give you a stacking context and you can place your lement in relation the the parent and not the viewport. If your parent element is centered then the child absolute element will always move accordingly with the parent.

In your example this would mean giving the td tag that holds the iframe a position:relative style. Then you can adjust the postioning values of the iframe style to suit. Obviously you don't need to move it as far as it was originally because it is now relative to its parent and not the viewport.

CSS
#iframeparent {position:relative}
#iframeparent iframe {position:absolute:left:-10px;right:-10px} etc...
<td id="iframeparent" etc....
<iframe etc..

Do you actually need to place it absolutely anyway. You could take out the absolute positioning and just use margins instead, (e.g margin:top:10px;margin-left:10px; or even negative margins if the need arises).

Using absolute positioning removes an element from the flow of the document and means that following content will not know the element is actually there.

Hope that helps.

Paul

(BTW you could also remove all those font tags and use css instead which will tidy things up a bit.)