newbie: css position of IFRAME

Jeff · Nov 22, 2005

Hey

I'm testing this on IE, 6.0 (but I want my code to work on all modern
browsers: Opera, FireFox, IE, Netscape Navigator)

I want the iframe (see code below) to fill the entire space the DIV it is
placed within
<div id="content">
<iframe id="frameid">
</iframe>
</div>

This is the CSS data I use to configure the layout of the html code:
#frameid {
left:0px;
right:0px;
width:100%;
border:2px solid #00C;
background-color:#C0C0C0;
}

#content {
margin:0 190px 0;
left:190px;
border:2px solid #00C;
background-color:#C0C0C0;
}

The problem is that the width of the IFRAME is larger than the DIV it's
placed within, I thought if I specified the IFRAME width to be 100% it's
then set to 100% of its parent container (here the DIV)??

Do you have any tips about what CSS/HTML setting I must use so that size of
the IFRAME is the SIZE of the DIV, then please send them to me...

Best Regards!

Jeff

Steve Pugh · Nov 22, 2005

Jeff said:
I'm testing this on IE, 6.0 (but I want my code to work on all modern
browsers: Opera, FireFox, IE, Netscape Navigator)

I want the iframe (see code below) to fill the entire space the DIV it is
placed within
<div id="content">
<iframe id="frameid">
</iframe>
</div>

This is the CSS data I use to configure the layout of the html code:
#frameid {
left:0px;
right:0px;

With no position property set these are meaningless.

width:100%;
border:2px solid #00C;
background-color:#C0C0C0;
}

#content {
margin:0 190px 0;
left:190px;

Again, with no position property set this is meaningless.

border:2px solid #00C;
background-color:#C0C0C0;
}

The problem is that the width of the IFRAME is larger than the DIV it's
placed within, I thought if I specified the IFRAME width to be 100% it's
then set to 100% of its parent container (here the DIV)??

It is. But...
100% + 2px border on lefy + 2px border on right > 100%
So the iframe itself is 100% of the width of the div, and then the
iframe has a 2px border all round.

Steve

Jeff · Nov 22, 2005

That didn't fix the problem, the width of the IFRAME is much larger than
(100% + 4 pixels). It takes up the rest of the browser window....

BTW, as you can see my <div id="gui"> is the outer DIV and I want it take
the full height of the browser window, height is set to 100% but it doesn't
cover the full height of the browser window, any tips about this is also
very very appreciated

Here is some more data:

index.php:
<body align=center>
<div id="gui">
<div id="header">
<div id="TopLogo">
</div>
<div id="language">
</div>
<div id="menu">
</div>
</div>
<div id="container">
<div id="calendar">
</div>
<div id="submenu">
</div>
<div id="content">
<iframe id="frameid">
</iframe>
</div>
</div>
<div id="footer">
</div>
</div>
</body>

index.css:
#gui {
height:100%;
margin-left:5%;
margin-right:5%;
background-color:#FFD000;
position:relative;
}

#TopLogo {
height:55px;
width:750px;
}

#language {
position:absolute;
height:55px;
right:0px;
width:30px;
top:10px;
background-color:#FF0000;
}

#menu {
background-color:#FFD000;
}

#container {
background-color:#FFFF00;
height:300px;
position:relative;
}

#calendar {
background-color:#DDF;
border:2px solid #00C;
position:absolute;
right:0px;
top:100px;
width:175px;
}

#submenu {
background-color:#DDF;
position:absolute;
left:0px;
top:0px;
width:175px;
text-align:left;
}

#content {
margin:0 190px 0;
background-color:#C0C0C0;
position:relative;
}

#frameid {
left:0px;
right:0px;
background-color:#C0C0C0;
}

#footer {
text-align:center;
background-color:#FDD;
border:1px solid #C00;
}

Jeff · Nov 22, 2005

The width of the IFRAME is okay when testing on Opera, but on IE it's too
large

Please, help me so this also is working on IE

Jeff

Disco Octopus · Nov 22, 2005

Jeff said:
Hey

I'm testing this on IE, 6.0 (but I want my code to work on all modern
browsers: Opera, FireFox, IE, Netscape Navigator)

I want the iframe (see code below) to fill the entire space the DIV it is
placed within
<div id="content">
<iframe id="frameid">
</iframe>
</div>

This is the CSS data I use to configure the layout of the html code:
#frameid {
left:0px;
right:0px;
width:100%;
border:2px solid #00C;
background-color:#C0C0C0;
}

#content {
margin:0 190px 0;
left:190px;
border:2px solid #00C;
background-color:#C0C0C0;
}

The problem is that the width of the IFRAME is larger than the DIV it's
placed within, I thought if I specified the IFRAME width to be 100% it's
then set to 100% of its parent container (here the DIV)??

Do you have any tips about what CSS/HTML setting I must use so that size of
the IFRAME is the SIZE of the DIV, then please send them to me...

Best Regards!

Jeff

Maybe, if you cant find a solution for what you are doing, you may try a
different approach.

What do you want to achieve from this? You want to contents of a page
within your parent page? You want to be able to reuse that content? Maybe
you can get this content into your pages by including it with some server
side language tools (PHP, ASP, Server side inlcudes, etc).

Maybe?

How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Is it possible an iframe can overlapp another?	3	Apr 20, 2022
Positioning CSS components	1	Nov 16, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
Having trouble centering contents of td ?	3	May 2, 2023
Please Help?	0	Jul 23, 2022
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023

newbie: css position of IFRAME

Jeff

Steve Pugh

Jeff

Jeff

Disco Octopus

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads