I have these three DIVS - one red, one blue and one containing an image.
I set the red div to the upper left at 0,0, and the blue div to the upper left at 0,111. The image div is also positioned in the upper left at 0,0 and stretches across the red and blue divs because the image it contains is transparent and I want the blue and red of the divs underneath it to be visible through the image.
I must be doing something very basic wrong here. Because I can't seem to get the blue and red divs to go where I want them to go. All I see is the red div on the green body background.
Any ideas?
<!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>
<style type="text/css">
html, body {
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0 0 0 0;
font-weight:normal;
font-size:9pt;
font-family: Verdana, Arial, Helvetica, serif, sans-serif;
width:800px;
height:600px;
}
body
{
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0 0 0 0;
background: green;
width:800px;
height:600px;
}
div#red
{
position:absolute;
top:0px;
left:0px;
background:red;
width: 111px;
height:109px;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0 0 0 0;
}
div#blue
{
postion:absolute;
top:0px;
left: 111px;
background: blue;
width: 111px;
height:109px;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0 0 0 0;
}
div#image
{
postion:absolute;
top:0px;
left: 0px;
width: 222px;
height:109px;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0 0 0 0;
}
</style>
</head>
<body>
<div id="red">
</div>
<div id="blue">
</div>
<div id="image">
<img src="http://www.eatduck.com/gfx/transparent.gif" width="222" height="109"/>
</div>
</body>
</html>