Would really appreciate a suggestion and explanation from this group.
I'd like to align a link at the bottom of a table cell. The rest of the text
should be aligned at the top of the cell. I'd also like to leave some padding
above the link so that I can reduce the width of the window and there's room
for the link to wrap to become 3 short lines rather than 1 long line without
bumping into the text. I'd like the cell sizes to be variable if at all
possible.
Is this possible in all browsers? I got it to work in Firefox as follows, but
in Chrome and IE, the div doesn't grown to 100%. If I switch Chrome to
box-sizing:content-box, it works - but that doesn't work in Firefox. And
neither box-sizing works in IE.
<table border="1">
<tr>
<td>
<div>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text
ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five
centuries, but also the leap into electronic typesetting, remaining essentially
unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. <a
href="#">link</a>
</div>
</td>
<td>
<div>Small amount of text <a href="#">link</a>
</div>
</td>
</tr>
</table>
* {
box-sizing:content-box;
-moz-box-sizing:border-box;
}
table, tr, td, div {
height:100%;
}
table {
border-collapse:collapse;
}
td {
vertical-align:top;
}
div {
position:relative;
padding-bottom:60px;
}
a {
position:absolute;
bottom:0;
display:block;
}
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
