Web Design Forums

haku · 18-09-2007, 14:09

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.

Emanuele · 18-09-2007, 16:39

You have to put a relative position on the container and absolute position for images. Code:

Code:

@charset "utf-8";
/* CSS Document */

#holder
	{
		position:relative;
		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;
	position:absolute;
	float:left;
	width: 18px;
	height: 18px;
	bottom: 0px;
	left: 0px;

	}

img.br
	{
		float: right;
		position: absolute;
		clear: right;
		width: 18px;
		height: 18px;
		bottom: 0px;
		right: 0px;
	}

Cheers.

haku · 18-09-2007, 19:47

Thanks! It was that position: relative in the container that I was missing. Arigato!

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

18-09-2007, 19:47	#3 (permalink)
haku shiro Join Date: Aug 2007 Location: Yokohama, Japan Posts: 1,803	Thanks! It was that position: relative in the container that I was missing. Arigato!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)