SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2004
    Location
    England
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute position div in table-cell

    Hi all,

    Can someone please help me thankyou.


    I have a 6 x 6 table say and each table cell is 60 px by 60 px say.

    What i want to be able to do is have a div of size 20 by 20 pixels (not in the flow) which will be absolutely positioned in the top-right of each cell.

    So i would like this mark-up
    <table>
    <tbody>
    <tr>
    <td>A<div class='tag'>12</div></td>
    <td></td>
    .....
    </tr>
    <tr>
    <td>.....
    </tr>
    ......
    </tbody>
    </table>


    and for the div to be positioned in top right, out of the flow, so the A in the example can be positioned centrally (not affected by div)

    IS this possible?

    so css might be

    td { width : 60px; height : 60px; text-align : center}

    td div.tag{?????}

    Thank you in advance

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,710
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    The div.tag would need position:absolute;top:0;right:0;

    Though it would need a parent to base it off of, and table cells aren't generally the best option . You will need to add another div . You can do taht by setting position relative on an ancestor
    Code:
    <table>
    <tbody>
    <tr>
    <td><div class="wrapper">A<div class='tag'>12</div></div></td>
    <td></td>
    .....
    </tr>
    <tr>
    <td>.....
    </tr>
    ......
    </tbody>
    </table>
    
    ...
    
    div.wrapper{position:relative;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •