My first question for these is always, does this have to be/should be an actual <table>?
Second, I think, if I can understand the specs correctly, that Firefox is actually doing it incorrectly. Without an explicit height (do the specs mean explicit to be a non-percentage, non-auto value?) on the parent, declaring height:100% is the same as declaring height:auto, which would make your div wrap its content, and not necessarily expand to its parents height (unless that parent had an explicit height set). See this codepen showing an explicit (if I'm using this correctly per the specs) height set: http://codepen.io/chrisrockwell/pen/dLego Pretty sure display:flex is going to make this a non-issue, so if you're only needing to work with latest releases, I'd go with that. On Wed, Nov 13, 2013 at 4:02 PM, Sara Haradhvala <har...@comcast.net> wrote: > 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/ > -- Chris Rockwell ______________________________________________________________________ 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/
