Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    <iframe> in liquid div

    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

  • #2
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this, I've added red borders and line breaks as temp indicators of what's happening here:

    Code:
    <!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

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by dschmierer; 11-08-2006 at 09:54 PM.

  • #4
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Gary

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •