Salve a tutti, ho il seguente CSS:

codice:
html,body{margin: 0;padding:0;}
body{font-family: arial,sans-serif;font-size: 76%;text-align:center;}
div#maincontainer{width:760px; margin:0 auto;text-align: left;background-color: #ccffcc;}
div#headerlogo{height: 60px;background-color:#000000;text-align:right;}
div#headerselection{height: 15px; background-color: #ccffcc;}
h1,h2{margin: 0;padding:0;}
h1{padding-left:10px;font: bold 2.3em/80px arial,sans-serif;}
h2{color: #00cc00;font-size: 1.5em;}
div#sitenavigation {float:left;width:100%;background-color: #cccccc;line-height:normal;}
div#sitenavigation ul {margin:0;padding:10px 10px 0;list-style:none;}
div#sitenavigation li {float:left;background:url("left.gif")no-repeat left top;margin:0;padding:0 10px 0 9px; /*il primo per l'altezza della parte sinistra, il secondo per distanziare i tab tra di loro, il quarto per dire di quanto scorrere la parte destra sulla sinistra*/}
div#sitenavigation a, div#sitenavigation strong, div#sitenavigation span {float: left;color:#00cc00;font: normal bold 1.2em/1.4em arial,sans-serif;text-decoration: none;display:block;background:url("right.gif")no-repeat right top;padding:5px 27px 5px 21px;}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
div#sitenavigation a {float:none;}
/* End IE5-Mac hack */
div#sitenavigation #current {background-image:url("left_on.gif");}
div#sitenavigation #current a {background-image:url("right_on.gif");/*padding-bottom:5px;*/}
E la seguente pagina HTML che lo utilizza:

codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<link rel="stylesheet" type="text/CSS" href="Final.css">
		<title>Lavora.it - e lavori con un click!</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
		<meta name="generator" content="HAPedit 3.0">
	</head>
	<body>
		<div id="maincontainer">
    		<div id="headerlogo">
        		<h1>Lavora.it</h1>
				<div id="sitenavigation">
  						<ul>
    						[*]Home
	    					<li id="current">Privato
	    					[*]Azienda
    						[*]About
  						[/list]
				</div>
			</div>
			<div id="headerselection">
			</div>
		</div> 
	</body>
</html>
Sapete spiegarmi perchè pur avendo compreso il div "sitenavigation" all'interno di "headerlogo", questo non viene compreso (cioè non viene delimitato da quel div)? Il problema è che così facendo il div "sitenavigation" mi va a coprire la "barra verde" div "hederselection"...potreste dirmi come fare? Grazie!

EDIT: ecco l'immagine: