Aligning a div at the bottom of a td independant of the rest of the TD's content

HTML & CSS
1

I have a situation that has me stumped.

In a TD, i have some content, the first portion of the content I want aligned to the top of the td, but the final DIV tag I want to always position at the very bottom of the TD.

This way, if the content above, across 3 table cells in a row, are different lengths, my price div at the bottoms are always aligned…

any ideas?

2

I find it tricky to position things in a table, but I think something like this should work the way you want, the positioning is commented:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
.products {
	float: left; /* to shrink-wrap the table */
	position: relative; /* cross-browser consistent reference can only be placed outside the table element */
	margin-bottom: -1px ; /* bottom margin to collapse the next table border touching, simulating next row */
	border: solid #000;
	border-width: 1px 0 1px 0;
}
.products table{
	table-layout: auto; /* table width is shared by the columns according to cell content, table expands by no-break content */
	table-layout: fixed; /* table width is equally shared by the columns, clips no-break content */
	border-collapse: collapse;
	width: 600px;
}
.products td{
	border: solid #000;
	border-width: 0 1px 0 1px;
	padding: 5px 5px 2em;
	vertical-align: top;
	text-align: left;
}
.products .price{
	position: absolute;
	bottom: 5px; /* bottom refers to positioned ancestor bottom, here the table bottom */
	left: auto; /* auto position is calculated by browser, usually the same as the in flow position */
	margin-left: 0; /* optional, use margin to control left position according to the given position */
}
</style></head><body>

<div class="products">
	<table>
		<tr>
			<td><div>Content is wrapped in a block-container to get a line break after, witch is needed for a consistent left:auto on the price container.</div><div class="price">Price</div></td>
			<td><div>Content Content Content Content Content Content</div><div class="price">Price</div></td>
			<td><div>Content Content Content</div><div class="price">Price</div></td>
			<td><div>Content</div><div class="price">Price</div></td>
		</tr>
	</table>
</div>

<div class="products">
	<table>
		<tr>
			<td><div>Content</div><div class="price">Price</div></td>
			<td><div>Content Content Content Content Content Content</div><div class="price">Price</div></td>
			<td><div>Content Content Content</div><div class="price">Price</div></td>
			<td><div>Content</div><div class="price">Price</div></td>
		</tr>
	</table>
</div>

</body></html>
3

hey ill try that thanks!

4

and just for more illustration,

this page , check the last row of 3 up products and you will notice that the first products LINK TEXT was too long, wrapped and places the price of the next two columns out of whack… this is why im trying to find an answer to this issue… cause i like things to be tidy… :stuck_out_tongue: –> http://www.ttechnologyinc.com/norstar.asp

5

I had a link button inside a table cell. All I did was set the position of the cell to relative and then styled the link button to position:absolute; bottom: 5px; and it put all the other stuff in the cell at the top and the link button at the bottom. Worked great.
Looked like this:
<asp:TableCell ID=“tblDay0” runat=“server” style=“position:relative;” >
<asp:LinkButton style=“position:absolute; bottom:5px;” Text=“Add” ID=“lbtnAdd1” runat=“server”></asp:LinkButton>
</asp:TableCell>

Worked great! Should work for you as well.

6

Hi, this thread is almost 2 years old, I don’t know how you fond htis thread (probably google) but you should look at the last post and realize that this thread is long dead.

7

That is the beauty of the internet. Yes it is old… but the website that was posted still doesn’t have the text aligned like he wanted and it is still a good question. The fact that I found it and that you also found it is a testament to the fact that information doesn’t die with time. … There is always someone learning… which begs the question. What was the point of your post? Because a post is only finished when it is answered.

8

That and if this thread shows up well on Google, people are currently finding it, so if a better answer comes along, it can still be valuable.

I tend not to answer very old threads myself… however if the “answer” received is incorrect or will cause some problem the OP might not notice until later, I’ll add my reply too.

Why I’m generally not in favour of locking “solved” threads, let alone old ones (even though I understand spammers tend to post on old threads).

That said, not all browsers will let you relatively position a table cell and then absolutely position the children inside. Firefox, I’m looking at you : ( This is why ErikJ has all those divs in there. Divs, not being table elements, can usually get around the problem of positioning with table elements.

9

Hi Mudpuppy98, Welcome to SitePoint! :slight_smile:

Thanks for sharing your solution, though as Stomme poes stated, it is not reliable crossbrowser.

Yes, and the question is still answered. :slight_smile:

The solution I posted would work very well, but the site OP linked to doesn’t use the solution.