将2个不同的iFrame与特定的宽度尺寸对齐

Question

I have been trying to align 2 different iFrames on a page, one to the right and another to its left. The iFrame to the left needs to have a width of 25% and height 100%, whereas the iFrame to the right needs to have a width of 75% and height 100%. They are placed inside a table having a height and width of 100%. I tried running my code on JSFiddle.net and it more or less looks the way I would have expected, however, it does not appear the same in my application (it definitely is not aligned 25%-75%). Here's a screenshot .

Here's my code snippet for the table:

<table height="100%" width="100%">
   <tr style="height:100%">

       <td style="width:25%">
           <iframe name="ifrTemplateLeftPreview" id="ifrTemplateLeftPreview" width="100%" height="100%"></iframe>
       </td>

       <td style="width:75%">
             <iframe name="ifrTemplateRightPreview" id="ifrTemplateRightPreview" width="100%" height="100%"></iframe>    
       </td>

   </tr>
</table>

I tried replacing '%' with pixels (px) to set the width of both tags, however, it seemed to mess the page up a bit and didn't seem to solve the issue.

The above code is only a part of the entire ASPX page, and I am sure nothing apart from this code snippet is causing any problems with the alignment of the iFrames. I have tried different ways but hasn't helped. Any help will be highly appreciated.

Answer 1

Alright, I sorted the issue myself. Basically I changed the <td> 's to <div> 's and added a float:left attribute to both iFrames and that seems to have sorted the issue:

<table height="100%" width="100%">
  <tr>
    <td>
      <div style="width:100%">

        <div style="width:25%; float:left">
         <iframe name="ifrTemplateLeftPreview" id="ifrTemplateLeftPreview" width="100%" height="100%"></iframe>
        </div>

        <div style="width:75%; float:left">
         <iframe name="ifrTemplateRightPreview" id="ifrTemplateRightPreview" width="100%" height="100%"></iframe>    
        </div>

       </div>
    </td>
  </tr>
</table>