Hi,

 

I'm fairly new to web design and just tinkering with little projects to amuse myself at the moment so I apologise if this is a really dumb question... I am trying to make my page consist of three iframes. Iframes 1 and 3 positioned to the far left and far right of the screen respectively, both filling the screen vertically and of a specific width (Using 200px as a trial but may adjust later) Iframe 2 also filling the screen vertically and having a dynamic width to fill the gap between 1 and 3. With the result that all three between them fill the screen both vertically and horizontally.

 

Can anyone either let me know if this really is as simple as I had hoped before I started or if I have set my sights too high for an early project, and if so how I would go about doing it? Have spent ages using percentage widths on all three and a hundred percent height and using position:absolut to set margins to zero to move things to edges, but so far have just ended up with loads of pages called test1.htm / test2.htm... etc. etc. and nothing that looks right!

 

Thanks for any help.

You could code three divs to contain the iframes. Left div float: left; right div float: right then the middle div, if it has no width and no float, will move up to use any space in the middle.

 

The problem is that iframes need a fixed width (I think) so the left and right iframes would have a fixed width but if the middle iframe had no width I'm not sure if it will work.

 

The side divs may need a slightly larger width than the iframes if the iframes have a scrollbar.

 

EDIT: I realised that the iframe cannot have no width, but it can have either px or % width so I tried %. It means that I cannot have px width for the side iframes and a % width for the middle, so I used % width for all three and floated all of them here:-

http://www.wickham43.com/forumposts/nvs110110.html

 

It works!

Edited January 10, 201115 yr by Wickham

Why even use iframes? Juust put your content in the divs?

You could code three divs to contain the iframes. Left div float: left; right div float: right then the middle div, if it has no width and no float, will move up to use any space in the middle.

 

The problem is that iframes need a fixed width (I think) so the left and right iframes would have a fixed width but if the middle iframe had no width I'm not sure if it will work.

 

The side divs may need a slightly larger width than the iframes if the iframes have a scrollbar.

 

EDIT: I realised that the iframe cannot have no width, but it can have either px or % width so I tried %. It means that I cannot have px width for the side iframes and a % width for the middle, so I used % width for all three and floated all of them here:-

http://www.wickham43.com/forumposts/nvs110110.html

 

It works!

 

 

Thanks Wickham, that's great! Exactly what I wanted.

Why even use iframes? Juust put your content in the divs?

 

I chose to use iframes as I want links in one section to change content of others and whilst I'm sure there are better ways to do this the only way my limited knowledge covers is to have links targeting iframes, and I guessed it was quicker and easier to get advice on layout rather than functionality.