CODEWITHSUNDEEP
htmlcssiframe
Sis
Sis

Reputation: 53

Displaying two iFrames side by side

I want to display two versions of a web page side by side using iFrames but i'm having some troubles with size and position attributes. (The left one seems to be displayed with a small height even though I set it to 100)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Split</title>
</head>
<body>

     <iframe src="link_v1" frameborder="0" scrolling="yes"                           
                                    style="overflow: hidden; height: 100%; 
                                                width: 49%; float: left; " height="100%" width="49%"
                                   align="left">
                                  </iframe>  

     <iframe src="link_v2" frameborder="0" scrolling="yes"  
                                        style="overflow: hidden; height: 100%;
                                        position: absolute;
                                        width: 49%; " height="100%" width="49%"                                 
                                         align="right">
                                        </iframe>
</body>
</html>

Upvotes: 5

Views: 20047

Answers (2)

Ani
Ani

Reputation: 2988

size of your html is size of your first iframe

it is because you used position: absolute in second iframe it is outside html and body and hence it occupies whole height not the html height

have a look at codepen below

 <iframe src="link_v1" frameborder="0" scrolling="yes"                           
                                style="height: 100%; 
                                            width: 49%; float: left; " height="100%" width="49%"
                               align="left">
                              </iframe>  

 <iframe src="link_v2" frameborder="0" scrolling="yes"  
                                    style="overflow: hidden; height: 100%;

                                    width: 49%; " height="100%" width="49%"                                 
                                     align="right">
                                    </iframe>

this way both of them will be inside html and body

also set height of html and body to 100% make both iframes occupy full height

html,body{
  width: 100%;
  height: 100%;
}

have a look at my codepen http://codepen.io/war_lock1221/pen/XMzXWb

Upvotes: 7

user7582130
user7582130

Reputation:

It is because you have a position: absolute; on your second Iframe, remove that and it works like the other.

Code: 

<iframe src="https://pbs.twimg.com/profile_images/2808637462/af65ad1f02516c07887ebc47bd51f8fd.jpeg" frameborder="0" scrolling="yes"                           
                                    style="overflow: hidden; height: 100%; 
                                                width: 49%; float: left; " height="100%" width="49%"
                                   align="left">
                                  </iframe>  

 <iframe src="https://pbs.twimg.com/profile_images/2808637462/af65ad1f02516c07887ebc47bd51f8fd.jpeg" frameborder="0" scrolling="yes"                           
                                    style="overflow: hidden; height: 100%; 
                                                width: 49%; float: left; " height="100%" width="49%"
                                   align="left">
                                  </iframe>

I have created a JsFiddle - https://jsfiddle.net/5m5oy7fj/

Upvotes: 0

Related Questions