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

[4SeeN]

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.

[ralph.m]

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.

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

[ronpat]

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.

[ralph.m]

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.

[4SeeN]

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.

[ralph.m]

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.

[ronpat]

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.

[4SeeN]

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.

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:

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/

[4SeeN]

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: