<iframe> in liquid div

dschmierer

11-08-2006, 08:28 PM

I am trying to create a 2 column webpage with a content panel on the left (liquid) and nav panel on the right (fixed width). In the content panel I would like to place an <iframe> element that also resizes according to screen size / browser size (i.e. is liquid). I'm using divs and CSS to control the layout and not tables but the <iframe> behavior confounds me.

I have floated the nav div on the right:

div#nav {float:right; width:256px;}

I have placed a right margin on the content div:

div#content {margin-right:256px;}

I have played around with the <iframe> within the content div, but can't get anything to work:

If I set the <iframe> width to 100% then I get the correct liquid behavior but the <iframe> extends over the whole width of the screen not allowing for the nav column on the right. If I set width to 100% and add margin-right:256px then the margin pops out 256px to the right rather than pushing the <iframe> in by 256px (this is in IE6). If I add padding-right:256px the right pops out as well and my content div pops out to 100% width.

Any suggestions? Is <iframe> compatible with CSS or should I throw in the towel and use tables?

Thanks,

Dave

Graft-Creative

11-08-2006, 09:33 PM

Try this, I've added red borders and line breaks as temp indicators of what's happening here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>iframe test</title>
<style type="text/css">
* { margin: 0; border: 1px solid red;}
div#content {margin-right: 256px;}
div#content iframe {width: 100%;}
div#nav {position: absolute; top: 0; right: 0; }
</style>
</head>
<body>
<div id="content">
<iframe>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</iframe>
</div>

<div id="nav">
nav stuff
nav stuff
nav stuff
nav stuff
</div>

</body>
</html>

You should be able to adapt that?

Good luck!

Gary

dschmierer

11-08-2006, 09:49 PM

Gary,

Thanks for the code snippet. It looked good but I still get some unexpected behavior when I add a url as the src attribute for the <iframe> element. For example if I replace <iframe> in your code with <iframe src="http://www.google.com"> when the page initially loads it shows google over the entire width of the screen, but if I change the size of my browser window, suddenly the iframe stays to the left of the nav bar as I would expect. However, when I reload the window again I get google covering the nav bar once again... very strange. Maybe this is an IE6 issue?

Dave

Graft-Creative

11-08-2006, 09:56 PM

uhm....seems to work here....even with google pulled into the iframe.

The only problem I'm getting is that the content from google does appear at 100% of the browser width (only in IE6).

May be some kind of IE 'Has-Layout' issue...

But as soon as I re-size the window a bit, everything pops into the desired place....

hehe, gotta love IE6 :D

Gary

dschmierer

11-09-2006, 12:31 AM

Yup, it is working for me in Firefox just fine now and it appears just fine in IE7. I'll search around for an IE6 fix. Thanks again for your help!

Dave