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

Align Iframe to the right ?

Discussion in 'HTML & JavaScript' started by cynic, Jul 14, 2011.

  1. cynic

    cynic Junior Member

    Joined:
    Oct 16, 2010
    Messages:
    101
    Likes Received:
    6
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    
    <body>
    <iframe id='bframe'  name='bframe' src='http://www.fatcatrewards.com/uk/bonuscash/?l=50' align="left" style='border: 0pt none ; left: -616px; top: -211px; position: absolute; width: 1024px; height: 649px;' scrolling='no'></iframe>
    
    
    </body>
    </html>
    Hey there

    I'm basically trying to align this iframe to the right so I can input another similar iframe to the left . I'd appreciate any help you html warriors can provide ?
     
    Last edited: Jul 14, 2011
  2. Eyal0s

    Eyal0s Newbie

    Joined:
    Jul 30, 2011
    Messages:
    14
    Likes Received:
    1
    float: right;
    ?
     
  3. Baybo.it

    Baybo.it Registered Member

    Joined:
    Aug 9, 2011
    Messages:
    72
    Likes Received:
    39
    Occupation:
    Founder of Baybo.it
    Location:
    San Francisco
    Home Page:
    Sometimes you need to add:
    Code:
    display: block;
    float: right;
    
    If it's displayed inline, the float won't work.
    You also might need to specify a width
     
  4. shudogg

    shudogg Regular Member

    Joined:
    Sep 23, 2008
    Messages:
    412
    Likes Received:
    153
    Occupation:
    Internet Marketing
    Location:
    Indiana
    Home Page:
    If you are wanting to put another iframe to the left of it, like you said, then you will need to use DIVs.. also, in the code you posted, you have align="left"

    Try something like this.. you may need to tweak it, its off the top of my head as I dont feel like creating a new html file and double checking it:

    Code:
    <style type="text/css">
    #wrapper
     {
        width: 100%;
        height: 310px;
        margin: 0;
        padding: 0;
    }
    #leftframe
     {
        display: block;
        float: left;
        width: 400px;
        height: 300px;
     }
    #rightframe
        display: block;
        float: right;
        width: 350px;
        height: 250px;
     }
    </style>
    
    <div id="wrapper"><!-- this holds everything together and is needed! -->
      <div id="leftframe"><iframe src=""></iframe></div><!-- left iframe -->
      <div id="rightframe"><iframe src=""></iframe></div><!-- right iframe -->
    </div>
    
    Just an example. you will need to adjust sizes, paddings/margins, styling to your needs. But this code shows the concept of how to get two things, side by side.
     
  5. xenon2010

    xenon2010 Regular Member

    Joined:
    Apr 27, 2010
    Messages:
    231
    Likes Received:
    48
    Occupation:
    web and desktop apps programmer
    Location:
    prison
    Home Page:
    you need a table contains two columns
    such as:
    HTML:
    <table align=center>
    <tr><td>your first iFrame code here</td><td>your second iFrame code here</td></tr>
    </table>