How can I place 2 iframes next to each other? - html

Question

I need to create a page where I have 2 iframes next to each other with 100% height.
The left frame needs to have a fixed width of 140px and the right one needs to take the width of the rest of the screen. Keep in mind that both frames need to have 100% height.
Since there are different size screens I can't set a fixed with on the right iframe as I want it to take all the screen after the first 140px;
I kinds got it to work while using precentage. But the problem with percentage is the the left menu sometime show very wide
I created a fiddle to show you what I have done so far
http://jsfiddle.net/mwg3j17d/16/
#main_block {
display: block;
width: 100% height: 100%;
}
#left_frame {
width: 25%;
}
#right_frame {
width: 75%;
}
#left_frame,
#right_frame {
float: left;
}
iframe {
box-sizing: border-box;
}
.b_footer {
padding: 10px;
width: 100%;
background-color: blue;
text-align: center;
color: white: font-weight: bold;
}
<div id="main_block">
<iframe id="left_frame" src=""></iframe>
<iframe id="right_frame" src=""></iframe>
</div>
<div class="b_footer">
Footer
</div>
As you can tell, there are couple of problems with my code.
The footer background's color for some reason is also showing where under the iframs.
The second problem is that I am using 25% width for the left iframe where it should be set to 140px
Finally, the height of the iframe is not taking the entire height of the screen.
How can I correct the problems mention above?
EDITED
I also tried to use Table to get the job done but the left iframe does not have the correct width. Here is an updated Fiddle to show you
http://jsfiddle.net/mwg3j17d/19/

Answer 1

You can use width: calc(100% - 140px) to create your right column. Also, your .b_footer style was too large (10px padding + 100% + 10px padding) because you didn't specify box-sizing: border-box, so I added it.
Using float takes the elements out of the normal html flow, and has
odd side effects if you don't fully understand them. Use
display:inline block instead.
Use width: calc(100% - 140px) to create your right column.
Use 100vh for the height instead of 100%;
You will have issues with the footer because again, 100% + whatever the footer size is always going to be larger than the page height. Easiest solution is to fix the size of the footer, and use that in a height calculation.
I've added html,body { margin:0; padding:0; } to remove the margins and padding. If you want them, add them back manually so that all browsers will use the same values, and use the new values in your width/height calcs.
html,body { margin:0; padding: 0; }
#main_block {
display: block; /* Useless, divs are display:block */
width: 100%; /* Useless, display:block elements are width:100% by default */
height: 100%; /* Fairly useless now, should take children's height */
font-size:0; /* Force space between inline-block elements to be 0 */
}
#left_frame {
width: 140px;
}
#right_frame {
width: calc(100% - 140px);
}
#left_frame,#right_frame {
display: inline-block;
box-sizing: border-box;
height: calc(100vh - 50px);
}
.b_footer {
padding: 10px;
height: 50px;
background-color: blue;
text-align: center;
color: white;
font-weight: bold;
box-sizing: border-box;
}
<div id="main_block">
<iframe id="left_frame" src=""></iframe>
<iframe id="right_frame" src=""></iframe>
</div>
<div class="b_footer">
Footer
</div>

Answer 2

To display them next to eachother, there are several options, in this case, the easiest seems (to me, opinions differ), to add float:left; to both frames.
As for the problem with the frames not taking the full height, for this you can use height:100vh which means, 100% of the viewport height.
As for the footer being behind the iframes as well as under them this is fixed by forcing the footer to float at the bottom of the page at all times. This can be done by using position:absolute and bottom:0 as well as left:0
As for the width having to be 140px, calc(100vw-140px) will do nicely here
Your updated code
HTML
<div id="main_block">
<iframe src="http://www.w3schools.com" id="left_frame" src=""></iframe>
<iframe src="http://www.w3schools.com" id="right_frame" src=""></iframe>
</div>
<div class="b_footer">
Footer
</div>
CSS
html,
body {
margin: 0;
padding: 0;
}
#main_block {
display: block;
width: 100vw;
min-height: 100%;
}
#left_frame {
width: 140px;
}
#right_frame {
width: -moz-calc(100% - 140px); width: -webkit-calc(100% - 140px); width: calc(100% - 140px);
}
#left_frame,
#right_frame {
float: left;
height:100vh;
}
iframe {
box-sizing: border-box;
}
.b_footer {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
top:100vh;
background-color:blue;
color:white;
text-align:center;
}
Updated Fiddle
Hope this helps!

Answer 3

If you're going to have multiple iFrames that basically fill up the entire page, why don't you go with frameset?
<frameset rows="*,100">
<frameset cols="140,*">
<frame src="left.htm">
<frame src="right.htm">
</frameset>
<frame src="footer.htm">
</frameset>
This circumvents all your problems at once.