471,605 Members | 1,623 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

I cannot get two iframes to sit side-by-side. Nor in the dimentions I want them in.

Screaming Eagle
I haven't recieved any information that I could use, and researching this issue hasn't turned up any worthy results. Hence my reposting. Since I have had no reply, and my associates wish to move things along, I have been forced to use regular frames for the site (which works fine, but visually its not what I'd like to produce). Ideally, I would like to fix this problem I currently have with iframes, and do without using regular frames. If anyone needs more information, don't hesitate to ask.

Here is my original text:

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. ]
  2. body {font-size:8pt}
  4. hr  {color:black}
  6. p.img {font:8pt; color:black}
  8. a.reg:link,a.reg:visited,a.reg:active       {font:6pt; color:black; text-decoration:none}
  9. a.reg:hover     {font:6pt; color:black; text-decoration:underline}
  11. th,tr,td   {color:black; font-size:8pt}
  13. table.one   {table-layout:auto; border-collapse:separate;
  14.     empty-cells:show; border-color:white;
  15.     border-style:none; padding:0; margin:0}
  17. div.main {float:left; border:1px; overflow:hidden;
  18.     left:0px; top:0px; padding:0; margin:0}
  20. div.wb1 {float:left; background-color:white; 
  21.     width:325px; height:390px; z-index:0}
  23. div.background  {float:left; left:0px; top:0px;
  24.     padding:0; z-index:-1}
  26. div.nav {float:left; height:70px; border:1px; border:solid; 
  27.     border:black; left:1px; top:1px; padding:0}
  29. div.contain {float:left; width:100%; padding:0; margin:0}    
  31. div.user {float:left; width:160px; 
  32.     border:1px; border:solid; border:black;
  33.     left:1px; top:73px; padding:0; display:inline}
  35. div.iframemain {float:left; top:73px; left:163px;
  36.     padding:0}
  38. img.background1  {left:0px; top:0px; z-index:-1}
  40. img.background2 {margin-left:20%}
  42. [
This is my xhtml code:

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

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
6 posts views Thread by adnanx82 | last post: by
5 posts views Thread by Frances | last post: by
2 posts views Thread by Guadala Harry | last post: by
4 posts views Thread by Alex D. | last post: by
1 post views Thread by XIAOLAOHU | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by MichaelMortimer | 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.