tags:

views:

2828

answers:

2

As a followup to this question on absolute positioning within a table cell, I'm trying to get something working in Firefox. Once again, I'm about 95% there, and there's just 1 little thing that's keeping me from declaring victory. Using the follow sample markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        table { width:500px; border-collapse:collapse}
        th, td { border:1px solid black; vertical-align: top; }
        th { width:100px; }
        td { background:#ccc; }
        .wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; }
        .manage { text-align:right; position:absolute; bottom:0; right:0; }
        p{ margin: 0 0 5px 0; }
        </style>
    </head>
    <body >
    <table>
        <tr>
                <th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th>
                <td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td>
        </tr>
        <tr>
                <th>Cras diam.</th>
                <td><div class="wrap"><p>Cras diam.</p><div class="manage">Edit | Delete</div></div></td>
        </tr>
        <tr>
                <th>Cras diam.</th>
                <td><div class="wrap"><p>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero. Sed elementum. Praesent porta, tellus ut dictum ullamcorper, est ante condimentum metus, non molestie lorem turpis in sapien. Aenean id enim. Nullam placerat blandit ante. Aenean ac ligula.</p><div class="manage">Edit | Delete</div></div></td>
        </tr>
    </table>
    </body>
</html>

How can I get the wrap div to always fill the cell, so that the management area sits at the bottom of the cell? And yes, the data that I am putting in the table is (in my mind) tabular, so I would like to use a table here. As a last resort, I may turn to an ugly nested div solution, but since a table is semantically correct here I'd like to use one if possible. Note that the background colors are simply to show the relative sizes of the elements - I don't care about background for my layout. Also note that I'd like the cells to have a flexible height, so that they only expand enough to fit their content.

A: 

Are you just trying to get the backrground to match the same colour? and not alignment, then you can use a background image in css to give the same effect, cos FF does not render the element to 100% inside a container. If the container is set on auto height, then the child will be set to auto too. The makes the rendering faster.

So the best bet would be a css background image.

Varun Mehta
No, I need to get the manage div to the bottom of the cell in Firefox. The backgrounds are just there to show how big the elements are.
Chris Marasti-Georg
+1  A: 

You could put (the same) fixed height on the table cell & wrap div thusly:

<style type="text/css">
table { width:500px; border-collapse:collapse}
th, td { height:200px; border:1px solid black; vertical-align: top; }
th { width:100px; }
td { background:#ccc; }
.wrap { position:relative; height:200px; padding-bottom:1em; background:#aaa; }
.manage { text-align:right; position:absolute; bottom:0; right:0; }
p{ margin: 0 0 5px 0; }
</style>
da5id
I don't know how tall each row will be though... I'd like to leave the layout flexible, so that the cells are only as tall as the content requires.
Chris Marasti-Georg
I don't think it's possible any other way, so maybe you could do something like count the max number of characters in each row using PHP and then set a row height inline or something?
da5id