Im trying to place 4 images in a div, one image in each corner. So far I have managed to get the top two images in their respective corners, but the bottom two images are only tucked up under the top images. I cant get them to align to the bottom of the div container. I have tried position: absolute, but it just positions the image on the bottom of the entire page, rather than the div its contained in. I have tried vertical-align: bottom (and baseline), and nothing. Can someone tell me what Im doing wrong?
XHTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="corners.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="holder">
<img class="tl" src="images/top left.jpg" /><img class="tr" src="images/top right.jpg" /><img src="images/bottom left.jpg" width="26" class="bl" /><img class="br" src="images/bottom right.jpg" /></div>
</body>
</html>
CSS:
Code:
@charset "utf-8";
/* CSS Document */
#holder
{
width: 80%;
height: 5em;
display: block;
}
img.tl
{
float: left;
width: 18px;
height: 18px;
}
img.tr
{
float: right;
width: 18px;
height: 18px;
}
img.bl
{
clear: both;
float:left;
width: 18px;
height: 18px;
bottom: 0px;
left: 0px;
}
img.br
{
float: right;
clear: right;
width: 18px;
height: 18px;
bottom: 0%;
right: 0%;
}
Thanks in advance.