On Nov 13, 2013, at 3:02 PM, Sara Haradhvala 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;
> }
Hi Sara,
Is this what your talking about?
http://designdrumm.com/test.zip
This was a fluid layout template from dreamweaver with your html added to.
I am not positive from your description that this is what your looking for.
May still need some media queries of your own added though.
HTH,
Best,
Karl
______________________________________________________________________
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/
