asked on

div refuses to go insde a div

I have some markup and css posted below, my problem is with the div that is taking alignment from the html body and not the div that it is in, see screen shot using firebug to illustrate.

Tks,
Owen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel=stylesheet type="text/css" href="static.css">

		<title>Untitled Document</title>
	</head>
	<body><div>
				
					<div class="first">
						
						<img id="img-one" height="46" width="49" src="img/buttonotwo.png" />
						
						<div id="tp-middle">O2</div>
						<div id="centre-middle">O2.ie My Account</div>
						<div id="bottom-middle">&#9733&#9733&#9733</div>
						<div id="free">FREE ></div>
						
						</div>
						
						
					
					<div class="second">second</div>
					<div class="third">third</div>
					<div class="fourth">fourth</div>
					
			</div>
	</body>
</html>

body {
  font-family:Arial;
  color:#303030;
  font-size:1.0em;
	
}


table, th, td, tr{
  border-collapse:separate;
}

table,tr,td,p,tbody{
  margin:0;
  padding:0;
}

tr,td{
  width:100%;
}

.first{
	height:64px;
	width:322px;
	background-color:#99999D;
	background-repeat:no-repeat;
	}
	
#fst-button
	{
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom:0px;
	}
#img-one
	{
	margin-top: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
	}	
#tp-middle
	{
	margin-top: -42px;
	margin-left:63px;
	}	
#centre-middle
	{
	margin-top:1px;
	margin-left:63px;	
	}
#bottom-middle
	{
	margin-top:-4px;
	margin-left:58px;
	}
#free
	{
	margin-top:-36px;
	margin-left:247px;
	}		
.second{
	height:64px;
	width:322px;
	background-color:#ACABA1;
	background-repeat:no-repeat;
}
.third{
	height:64px;
	width:322px;
	background-color:#99999D;
	background-repeat:no-repeat;
}
.fourth{
	height:64px;
	width:322px;
	background-color:#ACABA1;
	background-repeat:no-repeat;
}

Open in new window

ee1-css.png

WiB

#free
{
margin-top:-36px; -> root of your problem

OwenMoriarty

ASKER

I want the content of #free to be over on the right, it is correct where it is (relatively) now. The earlier screen shot was misleading, can you look at the attached? the div 'tp-middle' is not inside the div 'first'
Tks,
ee2-css.png

ASKER CERTIFIED SOLUTION