Solved

relative positioning concerning two frames

Posted on 2004-08-23
8
130 Views
Last Modified: 2010-04-09
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
Comment
Question by:rpong
8 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 11876580
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 11876793
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11876930
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
 

Author Comment

by:rpong
ID: 11877970
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:rpong
ID: 11887771
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 11888289
No, please post you're entire page please.
0
 

Author Comment

by:rpong
ID: 11888545
Alright, I will post the entire code, please wait  till Wednesday Morning as I do not have the code available to me currently
0
 
LVL 1

Accepted Solution

by:
MMabatig earned 500 total points
ID: 12244857
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

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now