I ended up using JavaScript to set the height of each cell - that seems to work in all browsers!
On Nov 13, 2013, at 5:03 PM, Chris Rockwell <[email protected]> wrote: > 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 <[email protected]> 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 [[email protected]] > 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 [[email protected]] 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/
