Image vertical-align: bottom in div

HTML & CSS
1

First of all my apologies if there’s already a solution for my question somewhere else. I just want to vertically align an image to the bottom of a div. However, it seems that line-height only works for firefox, at least not in IE6. Is there a workaround for this?

test page: http://janhouse00.50webs.com/bottom.html

screenshot:

source code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
* {
    margin: 0;
    padding: 0;
    border: 0;
}
.imgbox {
    float: left;
    border: solid 1px #999;
    height: 300px;
    line-height: 300px;
}

.img {
    vertical-align:bottom;
}
</style>
</head>
<body><div class="imgbox"><img class="img" src="box.gif" border="0"></div></body>
</html>
2

try this


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
float:left;
border:1px solid #ff0000;
height: 300px;
position:relative;
width:52px;
}

.img {
position:absolute;
bottom:0px;
border:1px solid #999999
}
</style>
</head>
<body><div class="imgbox"><img class="img" src="box.gif" border="0" width="50"></div></body>
</html>
3

A big thank you :slight_smile: