Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Table Positioning

    Does anybody know how I can do this? I've tried tons of different settings and I can't figure it out.

    I want to position the layer with the small table based off the top left of my main table on my site, instead of absolute positioning from the top right of the browser. I want to center my entire page in the window but if I use absolute positioning it won't load in the right place for people with different resolutions.

    Here are my current settings:

    Code:
    <div id="Layer1" style="position: absolute; left: 50; top:40;">
    <table width="200">
      <tr>
        <td>small table over top of main table</td>
      </tr>
    </table>
    </div>
    
    <table width="700">
      <tr>
        <td>main table</td>
      </tr>
    </table>
    </div>
    Any help would be greatly appreciated.

  • #2
    Regular Coder
    Join Date
    Oct 2002
    Posts
    380
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I suspect you don't need any tables at all. But, if you must use them, something like this might work:
    Code:
    <body style="text-align: center">
    <div id="container" style="width:700px; text-align: left;">
    <div id="righttable" style="float: right; width: 200px; right: 10px; text-align:left;">
    small table
    </div><!-- righttable -->
    large table 
    </div><!-- containter -->
    </body>
    In this layout, the text will wrap below the right-floating div.

  • #3
    New Coder
    Join Date
    Aug 2002
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Kiwi,

    I tried out your code and it made the small table appear at the right side of the main table, right above it. How can I make the small table appear on top of the big table (so it hides part of the big table) instead of just at the top of the page then the big table at the bottom.

    I appreciate your help!


    John

  • #4
    New Coder
    Join Date
    Aug 2002
    Posts
    50
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nevermind! I figured it out:

    Code:
    .class {
    	position: absolute;
    	left: 200px;
    	top: 20px;
    }
    
    <div id="container">
    <div id="Layer1" class="class">
    <table width="200">
      <tr>
        <td>small table over top of main table</td>
      </tr>
    </table>
    </div>
    
    <table width="700">
      <tr>
        <td>main table</td>
      </tr>
    </table>
    </div>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •