Boxen 'floaten' nicht

[maze]

Hallo,
ich komme gerade nicht weiter und hoffe das mir hier Jemand helfen kann.
Ich möchte 'meine Box3' neben meine 'Box' setzten bzw. floaten lassen.
Später sollen noch mehr Boxen hinzukommen die sich automatisch neben/unter die anderen Boxen setzen.
Der Befehl 'float: left' scheint nichts zu bewirken.
Sieht jemand woran es liegen könnte?

Hier meine Codes:

<style type="text/css" media="screen">  
  
  
#box  
	     { background-color: red; visibility: hidden; list-style-type: none; position: absolute; z-index: 2; top: auto; left: auto; width: 100%; height: 100%; min-width: 1250px; clear: right; float: left; }  
#box2  
	  { text-align: center; list-style-type: none; margin-top: 15%; z-index: 2; right: 0; left: 0; width: 100%; height: auto; }  
	  
</style>  
  
<style type="text/css" media="screen">  
  
#box3  
	    { background-color: green; visibility: visible; list-style-type: none; z-index: 1; top: auto; left: auto; position: absolute; width: 100%; height: 100%; min-width: 1250px; float: left; }  
#box4  
	  { text-align: center; list-style-type: none; margin-top: 15%; z-index: 1; right: 0; left: 0; width: 100%; height: auto; }  
  
</style>  

	<div id="box">  
			<div id="box2">  
				<a href="#MUSIC" name="MUSIC."><img src="dot.gif"></a>  
				<a href="#VIDEO" name="VIDEO."><img src="dot.gif"></a>  
				<a href="#DIARY" name="DIARY."><img src="dot.gif"></a>  
		</div></div>  
		  
		  
		  
		  
		  
		<div id="box3">  
			<div id="box4">  
				<a href="#MUSIC" name="MUSIC."><img src="dot.gif"></a>  
				<a href="#VIDEO" name="VIDEO."><img src="dot.gif"></a>  
				<a href="#DIARY" name="DIARY."><img src="dot.gif"></a>  
		</div></div>