How can I position an element at the bottom of its container in Firefox?

Question

I have a table cell, and I want a div within it to always be at the bottom left corner. The following works fine in IE and Safari, but Firefox is positioning the div<

Answer 1

According to the W3C, position:relative has no effect on table cells:

"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."

The solution is to add an extra wrapping div to the table cell.

EDIT: This div requires a height:100% and position:relative; to be set.

    

        

            

                Normal inline content.
                
your absolute-positioned content