SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    absolute positioning in centered table

    I am making one of those standard ~800px sites that are centered. My question is, though, because on different resolutions the centered table will be different lengths away from the side, how do I use absolute positioning? Is there something like position: center; left: 100px that would center it than move it 100 px left?

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Here's the way I'd go about it:

    CSS:
    Code:
    body {
       text-align: center;
      /*to center the content below it*/
    }
    #container {
      width: 760px;
      margin: auto;
      /*set this up as the container to position other elements by*/
      position: relative;
    }
    #container table {
      text-align: left;
    }
    #abspos {
      /*this will be positioned in relation to the outer <div> which hugs your table*/
      position: absolute;
      top: 40px;
      left: 80px;
      width: 200px;
      height: 80px;
    }
    HTML:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>
    <body>
    <div id="container">
      <table summary=" " id="layout">
        <tr>
          <td>col 1</td>
          <td> col2 
             <div id="abspos">
               <p>Absolutely positioned div.</p>
             </div>
          </td>
          <td> col3 </td>
       </tr>
      </table>
    </div>
    </body>
    </html>

  3. #3
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, then the container would act as "walls" i.e left: 20px would place the object 20px left of the left side of the container?


Bookmarks

Posting Permissions

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