1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

inserting content/table to the left of an iframe?

Discussion in 'General Programming Chat' started by flipstyle, Nov 22, 2010.

  1. flipstyle

    flipstyle Junior Member

    Joined:
    Sep 19, 2010
    Messages:
    120
    Likes Received:
    16
    Having a hell of a hard time here, and hoping someone would be kind enough to hop in to let me know if this is possible.

    I currently have a very basic webpage. Consists of a simple headerbar up top and a large iframe beneath it. I embedded the iframe using a custom css file with the left margin attribute set to 95 pixels. Reason being, is that I want to use that 95 pixels on the left side of the webpage for a few picture icons and textual info about my webpage.

    The problem is that, in Dreamweaver....I can click on that '95' width pixel margin space, but cannot insert any context into it...nor can I embed a table inside. Whenever I try to insert anything like a table, it instead gets placed up above the iframe, and not into the vacant margin to the left of it. It's basically inaccessible. Is there any way to access this space to modify it, or am I out of luck? Sorry, I'm just new to the whole iframes thing.

    Thanks in advance!
     
    Last edited: Nov 22, 2010
  2. Grizzy

    Grizzy Senior Member

    Joined:
    Nov 11, 2008
    Messages:
    919
    Likes Received:
    999
    Instead of setting a margin, you should float a container (table,div,ect..) to the left of the iframe. I don't know about dreamweaver, but its pretty basic html/css. Check out CSS float for examples.
     
    • Thanks Thanks x 1
  3. flipstyle

    flipstyle Junior Member

    Joined:
    Sep 19, 2010
    Messages:
    120
    Likes Received:
    16
    thank you so much sir, floating a table 'left' worked perfectly

    however, I changed my mind and decided to place the payment options to the right of the iframe instead. This has caused me a bit of trouble.

    When I tell the table to float right...everything looks fine when the browser is maximized, but when you 'scroll' or have the browser window set to a smaller dimension than can fit the entire iframe, the 'table' suddenly takes the place of the iframe and the iframe drops way down on the page. In other words, the table 'scrolls' inwards with the page and forces the iframe to drop down.

    I tried setting the iframe position to 'absolute,' which makes it so that the iframe doesn't move during scrolling, but the newly created table on the right simply slides inwards and 'disappears' under the iframe.

    Is there a way to create a table directly to the right of the iframe that stays stationary and won't move regardless of the browser orientation/sizing?

    I believe I know why 'float' worked on the left side and not the right...because the left
    margin isn't dependent on browser sizing/orientation.

    Here is my pseudo code for now:

    <table style="float:right;" width="80" height="500">

    <td>
    blah blah stuff inside table
    </td>
    </table>




    <!-- Start of the iframe -->

    <div id= "frameHolder">
    <iframe width="800" height="600" align= "center" frameborder=0 marginwidth=0 marginheight=0 VSPACE=0 HSPACE=0 SCROLLING=no allowtransparency="true" src="blahblah"></iframe>



    Thanks again!
     
  4. Grizzy

    Grizzy Senior Member

    Joined:
    Nov 11, 2008
    Messages:
    919
    Likes Received:
    999
    Hey buddy, try wrapping everything inside of a div that has its width set. This will prevent the iframe from 'sliding down' when the browser window is resized.

    HTML:
    <div style="width:880px">
    
    <table style="float:right;" width="80" height="500">
    <td>
    blah blah stuff inside table
    </td>
    </table>
    
    <iframe width="800" height="600" align= "center" frameborder=0 marginwidth=0 marginheight=0 VSPACE=0 HSPACE=0 SCROLLING=no allowtransparency="true" src="blahblah"></iframe>
    
    </div>
    
    <div style="clear:both"></div>
    Note the "<div style="clear:both">" at the bottom as well. This is needed if you want to place anything under your div but you don't want it to be part of the float.

    Hope it helps!