[CSS]Not positioning right

Seachmall

I have a number of divs and only #contact is positioning correctly. They should be 1cm below the one above but instead they're all 0cm. Any help?

body{
	margin: 0px;
	padding: 0px;
	text-align: center;
}
#wrap{	
	text-align: left;
	position: relative;
	margin: auto;
	width: 19cm;
	height: 26cm;
	padding: 0px;
	border: 1px solid #000000;
}
#header{
	position: relative; 
	top: 0cm;
	left: 0cm;
	width: 19cm;
	height: 4cm;
	border: 1px solid #000000;
}
#header #dateId{
	position: relative; 
	bottom: 0cm;
	right: 0cm;
	width: 5.5cm;
	height: 2cm;
	border: 1px solid #000000;
}
#contact{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 9cm;
	height: 3cm;
	border: 1px solid #000000;
}
#fault{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 9cm;
	height: 3cm;
	border: 1px solid #000000;
}
#details{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 14.5cm;
	height: 7cm;
	border: 1px solid #000000;
}
#signatures{
	position: relative;
	top: 1cm;
	right: 0cm;
	width: 10.5cm;
	height: 2cm;
	border: 1px solid #000000;
}
#plugtest{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 10.5cm;
	height: 1cm;
	border: 1px solid #000000;
}

HTML

<div id="wrap">

<div id="header">rr
	<div id="dateId">rr</div>
</div>
<div id="contact">rr</div>
<div id="fault">rr</div>
<div id="details">rr</div>
<div id="signatures">rr</div>
<div id="plugtest">ff</div>

</div>

ianhobo

This will fix it, I added it below and it works (added a 1cm margin)

body{
	margin: 0px;
	padding: 0px;
	text-align: center;
}
#wrap{
	text-align: left;
	position: relative;
	margin: auto;
	width: 19cm;
	height: 26cm;
	padding: 0px;
	border: 1px solid #000000;
}
#header{
	position: relative;
	top: 0cm;
	left: 0cm;
	width: 19cm;
	height: 4cm;
	border: 1px solid #000000;
}
#header #dateId{
	position: relative;
	bottom: 0cm;
	right: 0cm;
	width: 5.5cm;
	height: 2cm;
	border: 1px solid #000000;
}
#contact{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 9cm;
	height: 3cm;
	border: 1px solid #000000;
}
#fault{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 9cm;
	height: 3cm;
	border: 1px solid #000000;
	margin-top: 1cm;
}
#details{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 14.5cm;
	height: 7cm;
	border: 1px solid #000000;
	margin-top: 1cm;
}
#signatures{
	position: relative;
	top: 1cm;
	right: 0cm;
	width: 10.5cm;
	height: 2cm;
	border: 1px solid #000000;
	margin-top: 1cm;
}
#plugtest{
	position: relative;
	top: 1cm;
	left: 0cm;
	width: 10.5cm;
	height: 1cm;
	border: 1px solid #000000;
	margin-top: 1cm;
}

Evil Phil

I'll move this over to the webmaster forum.

squibs

As a general comment, I find CSS indispensible for most things, but am thinking about ditching it for positioning for all but the simplest of projects. The complex ones invariably turn out to be a long twisting journey on the quest to find hacks to get all the browser versions to work.

Table positioning rules. There - I said it....