External CSS wont align image on bottom [Archive]

Sub_Seven

11-19-2009, 04:57 PM

Hello,

I have been trying to align an image which is on the HTML (not a background on the CSS) to the bottom of the DIV tag using external CSS but it just wont work, I have tried

vertical-align:bottom;

vertical-align:text bottom;

position:relative;
bottom:0px;

Could someone please help? Thanks.

Fang

11-20-2009, 01:56 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
* {margin:0;padding:0;}
div {border:1px solid;
position:relative;
width:200px;
padding-bottom:100px; /* height of image so any text is always visible */
}
div img {
position:absolute;
bottom:0;
}
</style>

</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<img alt="an image" src="image.jpg" height="100" width="100">
</div>
</body>
</html>