...

View Full Version : <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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum