Hey Folks in the wonderful webland,
I'm having problems aligning images to the bottom of a div element.
I want to put images on the corners of the div elements borders. I've managed to get the images to align to the top without too much difficulty (using floats and pixel "management"). But getting the bottom ones to align to the corner is more of a challenge.
I've tryed using vertical align, and a couple of other techniques, with no success.
I know that I could set the location to be 70 px down (since the div box is 70 px high, But in the final page I won't know the height of the elements.
An Example of this is here
Thanks in advance for any and all help.
Jiggy
I'm having problems aligning images to the bottom of a div element.
I want to put images on the corners of the div elements borders. I've managed to get the images to align to the top without too much difficulty (using floats and pixel "management"). But getting the bottom ones to align to the corner is more of a challenge.
I've tryed using vertical align, and a couple of other techniques, with no success.
I know that I could set the location to be 70 px down (since the div box is 70 px high, But in the final page I won't know the height of the elements.
An Example of this is here
Thanks in advance for any and all help.
Jiggy
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tester</title>
<style type="text/css" media="screen">
#tester {
background:#fff;
height:40px;
border:1px solid #000;
height:70px;
}
.top-right-corner {
position: relative;
float:right;
top:-5px;
right: -5px;
}
.top-left-corner {
position: relative;
float:left;
top:-5px;
left: -5px;
}
.bottom-right-corner {
position: relative;
float:right;
right: -5px;
bottom: -5px;
vertical-align: bottom;
}
.bottom-left-corner{
position: relative;
float:left;
left:-5px;
bottom: -5px;
vertical-align: bottom;
}
</style>
</head>
<br/>
<div id="tester">
<img class="top-right-corner" src="cornerBox.gif" />
<img class="top-left-corner" src="cornerBox.gif" />
<h1> Random Content</h1>
<img class="bottom-right-corner" src="cornerBox.gif" />
<img class="bottom-left-corner" src="cornerBox.gif" />
</div>
<body>
</body>
</html>