title: Why cant I have 2 iframes side by side with total width 100%?
body: <p>I have total 4 <code>iframe</code>. </p>
  
  <pre><code>&lt;body&gt;
      &lt;iframe id="top_frame" src=""&gt;&lt;/iframe&gt;
      &lt;iframe id="left_frame" src=""&gt;&lt;/iframe&gt;
      &lt;iframe id="right_frame" src=""&gt;&lt;/iframe&gt;
      &lt;iframe id="bottom_frame" src=""&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I want 2 of them <code>left_frame</code> and <code>right_frame</code> side by side with their total width 100% (25% for <code>left_frame</code> and 75% for <code>right_frame</code>).</p>
  
  <p>So I put this CSS:</p>
  
  <pre><code>#top_frame {
      width: 100%;
  }
  #left_frame {
      width: 25%;
  }
  #right_frame {
      width: 75%;
  }
  #bottom_frame {
      width: 100%;
  }
  </code></pre>
  
  <p>But it did not work as you can see in this JSFiddle <a href="http://jsfiddle.net/srhcan/mwg3j17d/1/" rel="nofollow">http://jsfiddle.net/srhcan/mwg3j17d/1/</a></p>
  
  <p>If I decrease the width of <code>right_frame</code> to 73% then they will show side by side but will leave bit space on the right side.</p>
  
  <p>What is the reason of this?</p>
  
  <p>How can I have 2 iframes side by side with total width 100%?</p>