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/
