divs and iframes

7aken

i was playing around with a layout and came across a problem with an iframe and a div. i want to get the iframe to sit in the div but it wont work. my layout is basic header, sidebar, content area and footer. the sidebar sits to the right of the content area and is configured like this,

[HTML]css file

#sidebar {
background-color:#FFcc00;
float: right;
width: 200px;
border-left: 1px solid #666666;
}
#content {
background-color:ffcc00;
margin-right: 200px;
}

html

<div id="sidebar">list of links </div>

<div id="content"><iframe src="untitled.htm" ></iframe></div>[/HTML]

my problem/question is;

when the page is used the iframe appears at a default height / width so this obviously has to be set. if i set the iframe to 100% it seems to come out of the content div altogether and appears across the whole lenght of the page, thus distorting everything. (interesting thing is it doesnt seem to do this when testing in opera/ firefox just ie6) so how do i get the iframe to sit in the content div with no distortion? is there a nother way to load another page into my div to avoid using an iframe?

Ph3n0m

can you post up a screenshot of the problem in ie6 - as I have test the code you posted and apart from the background colour of the iframe not being yellow and horizontal scrolling in the iframe, I cant honestly see what the problem is

I have attached screenshot of Firefox and IE6 view

The only change to your code is this

<div id="content"><iframe src="untitled.htm" height="100%" ></iframe></div>

Firefox -

IE6 -

Gordon

Oh, I had a nasty experience with trying to get a 100% high iframe/div thing going on. I ended up having to use javascript as it wasn't as easy as simply popping in "100%". Can you define the containing div as 100% also?

seamus

When you specify a height of "100%", in theory that should be "100% of the height of the container". So when the container expands, so too does this object.

In practice, it's fiddly. In some browsers it goes to 100% of the container, but stays static when the size of the container changes. Other times (especially if the container has no height specified), it goes to 100% of the screen and stays there. Other times (particularly with "solid" HTML elements, as opposed to divs, and spans), it just goes to 100% of the screen and ignores the size of the container.

7aken

sorry for lack of follow up, the problem still exists and is as seamus says. my problem manifests in ie6 but not opera or firefox. it basically consists of the sidebar disappearing in ie6. ive been searching for answers on the web and it appears to be a common problem. will post if i find a fix