Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 155
  • Last Modified:

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
0
rpong
Asked:
rpong
1 Solution
 
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
 
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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
 
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
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.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now