471,594 Members | 2,649 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,594 software developers and data experts.

I'm having trouble displaying two iframes side-by-side.

Screaming Eagle
Ok, so some associates and I are building a website, and I'm in charge of the design and layout. I've decided to go with a simple navigation bar on top contained in its own div. Under the navigation bar, I have two iframes contained in one div and each iframe in its own inside the container div. In theory it was supposed to have shown the user statistics to the left at a width of 160 pixels and lowered from the top at 73 pixels. That displays fine.

Where everything falls apart is when the second iframe: "iframemain" (which should show up right next to the first) appears beneaththe user statistics iframe, and at the same dimentions as the user statistics iframe; I simply want it to take up the rest of the screen with my "iframemain".

This problem seems to happen on both IE6 and Firefox

I have tried not having a container div around both; I've removed the html height/width elements that I had previously placed in the body of the code; I've played around with height and width in the CSS coding as well; I taken away absolute postions, and as you can see, I've made the user div inline. I'm pretty much stumped as to what I'm missing here. Can anyone give me a pointer?

This is my CSS code:

Expand|Select|Wrap|Line Numbers
  1. body {font-size:8pt}
  3. hr  {color:black}
  5. p.img {font:8pt; color:black}
  7. a.reg:link,a.reg:visited,a.reg:active       {font:6pt; color:black; text-decoration:none}
  8. a.reg:hover     {font:6pt; color:black; text-decoration:underline}
  10. th,tr,td   {color:black; font-size:8pt}
  12. table.one   {table-layout:auto; border-collapse:separate;
  13.     empty-cells:show; border-color:white;
  14.     border-style:none; padding:0; margin:0}
  16. div.main {float:left; border:1px; overflow:hidden;
  17.     left:0px; top:0px; padding:0; margin:0}
  19. div.wb1 {float:left; background-color:white; 
  20.     width:325px; height:390px; z-index:0}
  22. div.background  {float:left; left:0px; top:0px;
  23.     padding:0; z-index:-1}
  25. div.nav {float:left; height:70px; border:1px; border:solid; 
  26.     border:black; left:1px; top:1px; padding:0}
  28. div.contain {float:left; width:100%; padding:0; margin:0}    
  30. div.user {float:left; width:160px; 
  31.     border:1px; border:solid; border:black;
  32.     left:1px; top:73px; padding:0; display:inline}
  34. div.iframemain {float:left; top:73px; left:163px;
  35.     padding:0}
  37. img.background1  {left:0px; top:0px; z-index:-1}
  39. img.background2 {margin-left:20%}
This is my xhtml code:

Expand|Select|Wrap|Line Numbers
  1. <div class="nav">
  2.       <!-- THE NAVBAR!-->
  3.       <table class="one" style="margin-left:350px" cellpadding="5">
  4.         <tr>
  5.           <td><a class="reg" href="nav1.htm" target="actframe">Nav choice1</a></td>
  6.           <td><a class="reg" href="area.htm" target="actframe">Nav choice2</a></td>
  7.           <td><a class="reg" href="nav2.htm" target="actframe">Nav choice3</a></td>
  8.           <td><a class="reg" href="nav3.htm" target="actframe">Nav choice4</a></td>
  9.           <td><a class="reg" href="nav4.htm" target="actframe">Nav choice5</a></td>
  10.           <td><a class="reg" href="nav5.htm" target="actframe">Nav choice6</a></td>
  11.         </tr>
  12.         <tr>
  13.           <td><a class="reg" href="nav6.php" target="actframe">Nav choice6</a></td>
  14.           <td><a class="reg" href="nav7.htm" target="actframe">Nav choicel8</a></td>
  15.           <td><a class="reg" href="nav8.htm" target="actframe">Nav choice9</a></td>
  16.           <td><a class="reg" href="http://www.mywebsite.net/forums/" target="_blank">Forums</a></td>
  17.           <td><a class="reg" href="bugreport.htm" target="actframe">Bug Report</a></td>
  18.           <?php
  20.           if($usertype == "Admin")
  21.           {
  22.           echo "<td><a class=\"reg\" href=\"admin.php\" target=\"actframe\">Admin</a></td>";
  23.           }
  25.           ?>
  26.         </tr>
  27.       </table>
  28.     </div>
  30.     <div class="contain">
  32.       <div class="user">
  33.         <!--this contains a separate page on the left of the screen for user statistics-->
  34.         <iframe src="user.php" name="showframe" frameborder="0" />
  35.       </div>
  37.       <div class="iframemain">
  38.         <!--this is where the user should see all of the links appear when clicked-->
  39.         <iframe src="area.htm" name="actframe" frameborder="0" />
  40.       </div>
  43.     </div>
  45.   </body>
  47.   <frameset>
  48.     <frame src="area.htm" name="actframe"/>
  49.   </frameset>
Aug 31 '07 #1
0 3037

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

10 posts views Thread by maxim vexler | last post: by
reply views Thread by Dan Popa | last post: by
1 post views Thread by Nick Tew | last post: by
4 posts views Thread by Arne Hendrickson | last post: by
reply views Thread by fleemo17 | last post: by
2 posts views Thread by Guadala Harry | last post: by
7 posts views Thread by Adrian Parker | last post: by
reply views Thread by XIAOLAOHU | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.