?
Solved

relative positioning concerning two frames

Posted on 2004-08-23
8
Medium Priority
?
141 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

 

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

752 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