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

Sorry to hear that... I finally ended up adding a new borderless "" to hold the bottom-content. — Alex from Jitbit, Apr 12 '12 at 07:16

Aron Rotteveel · Answer 1 · 2008-11-14T15:39:55.403

7

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>

edited Nov 14 '08 at 15:39

answered Nov 14 '08 at 15:20

Aron Rotteveel

81,193
17
104
128

That doesn't push it to the bottom :( – Chris Marasti-Georg Nov 14 '08 at 15:30
edited code example now. I tested this in Firefox 3 and it works. – Aron Rotteveel Nov 14 '08 at 15:40
1

In FF3, this is not pushing to the bottom for me. http://i36.tinypic.com/znqxpv.jpg – Chris Marasti-Georg Nov 14 '08 at 15:49
`height:100%` does *precisely nothing* in this context. See [CSS2](https://www.w3.org/TR/CSS2/visudet.html): "If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'" Therefore, as the parent `td` does not have explicit height, the div's height is calculated as the height of its content, regardless of the 100% specification. – Periata Breatta Oct 20 '16 at 22:50

score 1 · Answer 2 · answered Nov 14 '08 at 15:15

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>

Unfortunately, this one breaks when I add another row to the table that looks the same. — Chris Marasti-Georg, Nov 14 '08 at 15:28

score 1 · Answer 3 · edited Sep 28 '10 at 14:24

1

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

edited Sep 28 '10 at 14:24

Frankie

24,627
10
79
121

answered Jul 20 '10 at 15:20

Wouter

11
1

In FF18, this causes the table not to maintain its width, and the elements are positioned absolutely on the offset parent of the table (in this case, the window) – Chris Marasti-Georg Jan 08 '13 at 19:04

score 0 · Answer 4 · answered Nov 14 '08 at 15:17

0

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.

answered Nov 14 '08 at 15:17

Lasar

5,175
4
24
22

1

Trying this, I can't get the div to fill the td. – Chris Marasti-Georg Nov 14 '08 at 15:29

score 0 · Answer 5 · answered Nov 14 '08 at 15:18

0

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

answered Nov 14 '08 at 15:18

Powerlord

87,612
17
125
175

score 0 · Answer 6 · answered Nov 14 '08 at 15:36

0

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

answered Nov 14 '08 at 15:36

jishi

24,126
6
49
75

2

This does not work - the inner div does not get pushed to the bottom. – Chris Marasti-Georg Nov 14 '08 at 15:41

score 0 · Answer 7 · answered Nov 14 '08 at 15:36

0

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

answered Nov 14 '08 at 15:36

alexmeia

5,241
4
24
24

1

The data I am displaying is tabular. One column displays context for a comment, the other column displays the comment itself. Why use an element with no semantic meaning when a semantically rich one is provided, that fits my case? – Chris Marasti-Georg Nov 14 '08 at 15:40
Ok, but a definition list (dl) instead of a table can be a semantic solution as well. – alexmeia Nov 14 '08 at 15:58
They are not really definitions. Is there a way to make sure both dt and dd stay the same height as content changes? – Chris Marasti-Georg Nov 14 '08 at 16:04
This can be a solution: http://www.maxdesign.com.au/presentation/definition/dl-table-display.htm – alexmeia Nov 14 '08 at 16:24
I got very excited - it seemed to do everything I needed. Even got a border between the left and right sides (dt and dd). Unfortunately, if the dt content is longer than the dd content it breaks in IE. – Chris Marasti-Georg Nov 14 '08 at 16:59

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

7 Answers7

Linked