I wanted two separate table cells, Karl. But thanks for responding.
Sara
On Nov 18, 2013, at 12:04 AM, Karl DeSaulniers <k...@designdrumm.com> wrote:
>
> 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,
> I THINK this is what your wanting.
>
> <style type="text/css">
> * {
> box-sizing:content-box;
> -moz-box-sizing:border-box;
> }
> table, tr, td, div {
> height:100%;
> display:block;
> }
> table {
> border-collapse:collapse;
> }
> td {
> vertical-align:top;
> border: 0px solid #fff;
> }
> ul {
> border-collapse:collapse;
> list-style:none;
> }
> li {
> vertical-align:top;
> }
> div {
> position:relative;
> padding-bottom:60px;
> }
> a {
> position:absolute;
> bottom:0px;
> display:block;
> }
> </style>
> </head>
> <body>
> <table border="1">
> <tr>
> <td>
> <div style="width:80%;">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>
> <div style="width:20%;height:auto;right:0px;bottom:0px;padding:10px
> 10px 60px;position:relative;float:right;">Small amount of text <a
> href="#">link</a></div>
> </td>
> </tr>
> </table>
>
>
> or maybe just this...
>
>
> <style type="text/css">
> * {
> box-sizing:content-box;
> -moz-box-sizing:border-box;
> }
> table, tr, td, div {
> height:100%;
> display:block;
> }
> table {
> border-collapse:collapse;
> }
> td {
> vertical-align:top;
> }
> ul {
> border-collapse:collapse;
> list-style:none;
> }
> li {
> vertical-align:top;
> }
> div {
> position:relative;
> padding-bottom:60px;
> }
> a {
> bottom:0px;
> }
> </style>
> </head>
> <body>
> <table border="1">
> <tr>
> <td>
> <div style="width:80%;">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>
> <div
> style="width:20%;height:auto;right:0px;bottom:0px;padding:10px;position:relative;float:right;">Small
> amount of text <a href="#">link</a></div>
> </td>
> </tr>
> </table>
>
>
> HTH,
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
> ______________________________________________________________________
> 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/
______________________________________________________________________
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/
