SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Can you relativlely or absolutely position items in a display:table-cell ?

    Hello,

    I have a link that I want to always be at the bottom of the cell. Right now the link is in a <p> element. I tried doing both absolutely and relative positioning but I can get the effect I am looking for. I was wondering if maybe this isn't possible?

    My other option was to just create another row and make sure there's no spacing and put the link in there to give the illusion that it is just one cell.

    Thanks in advance.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    You can give the container position: relative, give it some bottom padding, and then set the link as position: absolute and place it at the bottom of the container. E.g.

    Code:
    .container {position: relative; padding-bottom: 30px;}
    .element {position: absolute; bottom: 0;}

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Pardon the intrusion, but I had to play with this question. Have been struggling with it myself. Some possible examples attached. It seems to require div.table {display:table; position:relative}, then {position:absolute} can be applied to a paragraph within div.tablecell {display:table-cell}. position:relative doesn't seem to work when applied to table-cell.

    I only have about 2 toes in the 21st century, so I could be partly wrong.
    Attached Files Attached Files

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Nice work, ronpat. I didn't notice the conditions of display table in the first post. Yes, positioning like that doesn't work in a display: table situation. It's best not to put critical info in the title only.

  5. #5
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Thanks for the replies .

    I have a row with 4 cells, when attempting to apply the absolute position it takes the element to the very last cell on the right... instead of just placing it within the cell it is in. I tried various methods but not sure if I am sure tired or trying to do the impossible lol.

    I am very new to css tables so I could be thinking about this all wrong.

    Here is an example:

    - http://jsfiddle.net/56H5x/1/

    The "Learn more" link to the very right should be at the bottom right of the first cell.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Do you have an image you can post of what you want to see? display:table may not be the best fit for what you want here.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The position:relative property is at the table level, not the cell; so all positions are relative to the overall table.
    Instead of {right:0}, try {left:12%}
    That should put you in the ballpark, but it is not as precise as the items within each cell.

  8. #8
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Do you have an image you can post of what you want to see? display:table may not be the best fit for what you want here.
    I was attempting to have multiple columns which always had the same height no matter how much content each one had. I just started learning about display:table from a sitepoint book which gave me the idea of doing it via this method. I usually do floats and what not but I wanted to go a different method with this project. It is starting to turn out that I may have dove too deep into display:table without learning more about it first lol. I might have to redo my entire website.

    Quote Originally Posted by ronpat View Post
    The position:relative property is at the table level, not the cell; so all positions are relative to the overall table.
    Instead of {right:0}, try {left:12%}
    That should put you in the ballpark, but it is not as precise as the items within each cell.
    I tried using the position:relative on both the row and the cell, but only got results from the table. However someone just pointed this out to me as the reason for me never being able to make this work:

    The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
    - http://www.w3.org/TR/CSS21/visuren.html#propdef-position



    Someone recommended the following which seemed to work except when varied content is placed in cells, it doesn't properly place the link at the bottom:
    Code:
    on P apply this position: relative; float: right;bottom: -20px; as
      
    <p style="text-align: right; position: relative; float: right;bottom: -20px;">
    &nbsp;<span class="button-wrapper"><span class="button-l"> </span>
    <span class="button-r"> </span>
    <a class="button button" href="#">Learn More</a></span>&nbsp;<br>
    </p>
    As can be seen here:
    - http://jsfiddle.net/56H5x/14/

  9. #9
    SitePoint Guru
    Join Date
    Nov 2001
    Location
    Fort Lauderdale
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So sort of found a solution but it is not compatible with firefox, it is a bug. Not technically a bug as much as other browsers chose to display it according to the webmaster while firefox is sticking strictly to specs.

    Below is the solution from the other person along with the link for the bug:

    While setting position:absolute on child element <p> set position:relative on parent element <div> having <p> element.
    So the child element will be relative to its parent element.
    EDITED:
    Working JS Fiddle in Chrome, Safari, Opera and IE

    But not compatible in Firefox, because Firefox does not obey position:relative on display:table-cell elements.
    See the reference:



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
  •