Solved

relative positioning concerning two frames

Posted on 2004-08-23
8
132 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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
 

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

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
align Linkedin sign to the right page 5 36
how to handle long text strings in javascript or ajax 1 32
HTML5 save .Dat to server side 20 47
Joomla 2.5 shopping cart 7 23
Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

810 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