relative positioning concerning two frames

Hello my fellow experts,

I have two frames both enclosed by a positioning div tag.
My question is, how do I code the second table to have a relative position to the first table. Specifically a relative position immediately below the first table.
For example, if I dynamically change myTable1 height to 400, I would like the second table to dynamically change locations and adjust to below the first one.

<style text="text/css">
  #1{
     position: asbolute;
     left:0px; top:0px}

   #2{
     position: asbolute;
     left:0px; top:150px}

   #myTable1{
     position:absolute;
     left:0px; top:0px;
     width:100px; height:140px;}

   #myTable2{
     position:absolute;
     left:0px; top:0px;
     width:100px; height:140px;}
</style>

...<body>
<div id=1>
     <table id=myTable1>
           <TR>   <td></td></tr>      
     </table>
</div>

 <div id=2>
      <table id=myTable2>
          <TR><td></td> </TR>
      </table>
</div>


Note:  I tried to change the style without success:
   #2{
     position: relative;  <---------------------
     left:0px; top:150px}


I'm am unsure if I approaching this problem correctly. Should I not use enclosing div tags to position the tables? IF not, that would pose a problem for maintenance because I not only have a table but also buttons, a header img, and a header text that need to be positioned correctly over the table.

Thanks for your help, your services will be awarded 500 points for the correct code and suggestion as to how I should approach this problem. Thanks again.

-Ryan
rpongAsked:
Who is Participating?
 
MMabatigCommented:
Okay, this question has been around for a while, but I'll throw in my answer anyway.

I think I understand what you want.  You have two elements Div1 and Div2.  Div2 mush always be positioned relativeley below Div1 regardless of Div1's location on the page or of Div1's height.  I am assuming that you may want to manipulate the visibility or some other style of Div2 which is why you want to use <div> tags instead of just tables. Just encapsulate both divs with another div tag.  i.e.:

<div id="DivWrapper" style="position:absolute;left:50;top:50;">
        <div id="Div1">
                   Some content
        </div>
        <div id="Div2">
                   Some more content
        </div>
</div>

The style of "Div2" and "Div1" will default to relative.  You can move the pair of Divs about the page freely by manipulating "DivWrapper"

Good Luck,
-MMabatig
0
 
ZylochCommented:
Well, you spelled absolute wrong ;). This may work better:

body {margin:0px;}

#1 {}
#2 {position:relative;top:150px;}

#myTable1 {width:100px;height:140px;}
#myTable2 {width:100px;height:140px;}

<body>
<div id="1">
   <table id="myTable1">
      <tr><td>JFDSOIFDS</td><td>TEST</td></tr>
   </table>
</div>
<div id="2">
   <table id="myTable2">
      <tr><td>OTHER STUFF</td><td>RELATIVITY</td></tr>
   </table>
</div>
</body>

Because the <div> is a block level element by default, the second div should normally be right below the first one. This is basically the same as yours, but see if it works.
0
 
COBOLdinosaurCommented:
Zyloch,

I think you probably don't need these at all:
#1 {}
#2 {position:relative;top:150px;}
If the browser is allowed to position by default they should come one under the other.

rpong,
Using just number for ids will not work in some browsers you need to start the id with an alpha character.

Cd&
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
seanpowellCommented:
I would just add that both div's "and" tables are block level elements by default, so unless you're doing something we can't see, the div tags are redundant.

Also, since you're applying identical styling to "both" tables, you should use a class instead:

<style text="text/css">

.myTable
{
      width:100px;
      height:140px;
}

</style>

<table class="myTable">
      <tr>
            <td></td>
      </tr>
</table>
<table class="myTable">
      <tr>
            <td></td>
      </tr>
</table>

Please note that this recommendation is just based on the short piece of code you posted. There may be other factors that may dictate an alternate solution...

Thanks,
Sean
0
 
rpongAuthor Commented:
I appreciate all of your answer.
I did not include most of the code that I am using and created a "short" version for the purposes of this question.
I will try all of your solutions and see what works best, then is when I will award points.


-Ryan
0
 
rpongAuthor Commented:
none of the solutions are working for me.
If I expand the 1st table height the 2nd table is still static.
any more suggestions
0
 
seanpowellCommented:
No, please post you're entire page please.
0
 
rpongAuthor Commented:
Alright, I will post the entire code, please wait  till Wednesday Morning as I do not have the code available to me currently
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.