100% width iframe overlapping scroll bars in overflow div

In the example below the iframe has 100% width and in IE7, the vertical scrollbar of the div is not restricting the width of the iframe when the doctype is specified.  Remove the doctype and it works fine.  How do I fix this in IE7 without using javascript and without changing the doctype?  I just need it working in IE7 for now, not any other browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test</title>
</head>
<body>
    <div style="width: 300px; border: 3px solid green; overflow: scroll;">
        <iframe name="test" width="100%" style="border: 3px solid red;"></iframe>
    </div>
</body>
</html>

Open in new window

iframe-bad.jpg
iframe-good.jpg
eChalkAsked:
Who is Participating?
 
scrathcyboyCommented:
" I cannot change the setup or layout of the page, nor the doctype"

If so, there is nothing you can do, if you can't change the relation between the DIV and Iframe.  Look at the tying you would have saved me above if you had just said this upfront.  Why omit crucial information???
0
 
eChalkAuthor Commented:
This also occurs if the inner element is just a div instead of an iframe.
0
 
scrathcyboyCommented:
You do not need a DIV encasing an iframe -- and in your case, since you are not using the DIV for positioning, you should remove it.  Try the iframe standing alone, and when you find it works, then we reach the conclusion that various browsers develop or create conflicts between iframes and DIVs that are enclosing them.  An iframe always has high visibility, and if you have DIV menu items dropping down over them, they will not show, as the iframe has precedence, at least in IE6.  You will also find that FF3 and IE7 handle the DIV - iframe problem differently.  If it works without a DIV wrapper, ask if you really need it?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
scrathcyboyCommented:
Oh, and the other issue is that you are using the DIV to try to scroll the iframe?  This is a No-No -- you have to style the iframe with its own scrolling, as the iframe is an OUT-of-page element (i.e. a separate page), whereas a DIV is an IN-page element.  Basically an in-page cannot correctly control and out-of-page, so you need to think of the iframe is its OWN page (which it is when you put a page into it), so all the scrolling is done by the iframe -- and can be changed extensively in CSS.

Use a DIV wrapper only for positioning the iframe, if you have to, and keep it away from overlapping elements like drop downs.
0
 
eChalkAuthor Commented:
I control the content of the iframe, setting the innerhtml and then adjusting the height of the iframe to the scrollheight of the inner document's body.  This is a simple version of a more complex page, and the iframe is NOT the only thing in the div.  The point is I NEED the iframe to horizontally fill the div correctly.  I cannot change the setup or layout of the page, nor the doctype.  Is there a workaround?
0
 
eChalkAuthor Commented:
Sorry, I'll be more clear next time.  My question was not how to lay out my content, but how to make the iframe fill the div correctly.  If it was possible with some other method of css or something.
0
 
eChalkAuthor Commented:
Well, I guess I'll have to fix this the same way I fixed position: absolute; top: 0; bottom: 0; in ie6... css expressions!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.