Position an img at bottom of a table cell

HTML & CSS
1

I’ve got 6 small images one in each of 6 cells of a 3x2 table that is also referencing a popup thumbnail. All’s I want to do is position each image in the lower right corner of each cell with appropriate padding.

Can anyone help?

develop.pariscut.com/services-2

2

Are teh images allowed to overlap anything? Other content? Will there be anything “in the same line” as the image?

If nothing can overlap (and you need it to wrap around stuff), you’re basically looking for a float:bottom. Impossible. Design a different way to get what you want :).

If there is “nothing in the same line as the image”, then you can just wrap a div around everything (in the <td>, which I don’t see why you are using tables in the first place…), give that <div> some bottom padding, equal to the image. Give it position:relative as well, and then set an <img> in the HTML with that image. Position absolute it at the bottom of the cell.

3

Hi,

As Ryan said you can’t really do this in a table cell as you can’t absolutely position something relative to a table-cell. Your table option would be to create a new row just for the thumbnails and they they would all align.

In a css layout you could position the elements to the bottom and preserve the space with padding on the element above.

For ie8+ you could use display:table-cell and do something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
	position:relative;
	width:50%;
	float:left;
	border:1px solid #000;
	overflow:hidden;
}
.box {
	width:33%;
	border:1px solid #000;
	background:red;
	display:table-cell;
	padding-bottom:60px;
}
* html .box{float:left;width:32%}
*+html .box{float:left;width:32%}
.thumbnail {
	clear:both;
	float:right;
	width:50px;
	margin:0 3px 0 0;
}
p.thumbnail a {
	width:50px;
	height:50px;
	display:block;
	background:blue;
	text-align:center;
	line-height:50px;
	position:absolute;
	bottom:0;
	border:1px solid #fff;
}
</style>
</head>

<body>
<div class="wrap">
		<div class="box">
				<p>Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet </p>
				<p class="thumbnail"><a href="#">test</a></p>
		</div>
		<div class="box">
				<p>Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet </p>
				<p class="thumbnail"><a href="#">test</a></p>
				<p>Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet </p>
		</div>
		<div class="box">
				<p>Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet Lorem ipsume dolor sit amet </p>
				<p class="thumbnail"><a href="#">test</a></p>
		</div>
</div>
</body>
</html>