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

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 absolutely on the page, not within the cell (code based on the solution solution here). I have tested both with and without the DTD, which put Firefox in Quirks mode and Standards mode, and neither worked properly. I'm stuck - any ideas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        table { width:500px; }
        th, td { vertical-align: top; border:1px solid black; position:relative; }
        th { width:100px; }
        .manage { text-align:right; position:absolute; bottom:0; right:0; }
        </style>
    </head>
    <body >
    <table>
        <tr>
            <th>Some info about the following thing and this is actually going to span a few lines</th>
            <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
        <tr>
            <th>Some info about the following thing and this is actually going to span a few lines</th>
            <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
    </table>
    </body>
</html>

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.

<table>
    <tr>
        <td>
            <div style="position:relative;height:100%;">
                Normal inline content.
                <div class="manage">your absolute-positioned content</div>
            </div>
        </td>
    </tr>
</table>

See if this works for you. Not sure of the exact ature of the problem but it has something to do with using td with relative positioning. I wrapped the table with div tag and positioned that relatively and it seems to do what you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        table { width:500px;  }
        th, td { vertical-align: top; border:1px solid black; }
        th { width:100px; }
        div.body {position:relative; width:500px;}
        .manage { text-align:right; position:absolute; bottom:0; right:0; display:block}
        </style>
    </head>
    <body >
    <div class="body"><table>
        <tr>
                <th>Some info about the following thing and this is actually going to span a few lines</th>
                <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
        </tr>
    </table></div>
    </body>
</html>

Wouter

Put a display:block on the table and now FF respects the position:relative.

position: relative is apparently not globally supported for the td tag. I couldn't find definitive sources unfortunately.

You might want to put a div block into the td with the desired size and apply position: relative to that instead.

This may sound really obvious, but have you tried using vertical-align: bottom; in .manage?

have a DIV inside the TD with width: 100% and height: 100%, then set that to position: relative.

Right, position:relative has no effect for table elements, and firefox apply this rule. The solution of the div works, but this is terrible markup in my opinion.

Do you absolutely need to use a table to display this content? (Or is it relative?)

If not, why don't you use div elements and do what you want?

To use tables for layout issues is so 1998...

来源：https://stackoverflow.com/questions/290335/how-can-i-position-an-element-at-the-bottom-of-its-container-in-firefox

标签

html

css

positioning