Salve a tutti, ho un problema nel posizionamento dei <div> all'interno della pagina.

In pratica non capisco perché nonostante il <div> "menu" sia contenuto in "head", quest'ultimo si comporti ignorando l'area occupata da "menu"; mentre ho bisogno che "head" si estenda per tutta l'altezza di "menu" ( non vorrei dare un'altezza fissa ad "head" ).
Di conseguenza anche "content" e "footer" si trovano in poisizioni sbagliate.

Qui il codice HTML
codice:
<!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>
		<title>Title</title>		
		<link rel="stylesheet" href="cssn.css" type="text/css" />
	</head>

	<body>
		<div id="main">
			<div id="head">
				<div id="menu">
					<ul>
						[*]aaaaaaaaaa
						[*]bbbbbbbbbb
						[*]cccccccccc
						[*]dddddddddd
					[/list]
				</div>
				
				<div id="title">
					TITOLO
				</div>
			</div>
			
			<div id="content">
				cnsancasoin
			</div>
			
			<div id="footer">
				fsdnocabscoas
			</div>
		</div>
	</body>
</html>
e CSS
codice:
*{margin: 0;
	padding: 0;}
div
{color: white;}
a
{text-decoration:none;}
ul
{text-decoration: none;}
ul li
{
	list-style: none;
	text-align: right;
}
#main
{
	position: relative;
	top: 100px;
	width: 850px;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
	display: block;
	/*height: 600px;*/
}
#head
{
	background-color: yellow;
}
#menu
{
	position: relative;
	top: 60px;
	margin-right: 50px;
	float: right;
}
#title
{
	position:relative;
	top: 30px;
	margin-left: 40px;
	float: left;
}
#content
{
	clear:both;
	background-color: blue;
}
#footer
{
	background-color: green;
}
Ho letto che si può rsolvere con "height: auto;" su "head", ma non funziona.
Perché "head" ha altezza 0 ? Come faccio a dargli l'altezza del suo contenuto ?

Grazie in anticipo

PS: scusate se il codice è lungo, ma al momento non ho lo spazio per renderlo visibile.