title: How can I place 2 iframes next to each other?
body: <p>I need to create a page where I have 2 iframes next to each other with 100% height.</p>
  
  <p>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.</p>
  
  <p>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;</p>
  
  <p>I kinds got it to work while using precentage. But the problem with percentage is the the left menu sometime show very wide</p>
  
  <p>I created a fiddle to show you what I have done so far</p>
  
  <p><a href="http://jsfiddle.net/mwg3j17d/16/" rel="nofollow">http://jsfiddle.net/mwg3j17d/16/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main_block"&gt;
    &lt;iframe id="left_frame" src=""&gt;&lt;/iframe&gt;
    &lt;iframe id="right_frame" src=""&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;div class="b_footer"&gt;
    Footer
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can tell, there are couple of problems with my code.</p>
  
  <ol>
  <li>The footer background's color for some reason is also showing where under the iframs.</li>
  <li>The second problem is that I am using 25% width for the left iframe where it should be set to 140px</li>
  <li>Finally, the height of the iframe is not taking the entire height of the screen.</li>
  </ol>
  
  <p>How can I correct the problems mention above?</p>
  
  <p>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 
  <a href="http://jsfiddle.net/mwg3j17d/19/" rel="nofollow">http://jsfiddle.net/mwg3j17d/19/</a></p>