CSS: Problem mit float

[CSSNoob]

Hallo zusammen,

wie der Titel schon sagt, habe ich ein Problem mit float:

<div id="center"><!--center site-->

<div style="width:800px;">

<div style="width:100%; height:120px"><img src="layout/images/logo.jpg" alt="2nd Sense"></div>
<div style="width:100%; height:50px;"><img src="layout/images/pixel.gif" width="100%" height="50"></div>
<div style="width:150px; float:left;"><img src="layout/images/logo2.jpg" alt=""></div>
<div style="width:50px; float:left;"><img src="layout/images/pixel.gif" width="50" height="400"></div>

<ul class="imagebox">
<li>
<a href="admin.php?op=ImagesMain"><img src="layout/images/admin/1.gif" border="0" alt=""></a><b>Administer images</b>
</li>
<li>
<a href="admin.php?op=ImagesSelectCat"><img src="layout/images/admin/2.gif" border="0" alt=""></a><b>Edit image-categories</b>
</li>
<li>
<a href="admin.php?op=ImagesSelectToUpload"><img src="layout/images/admin/3.gif" border="0" alt=""></a><b>Upload images</b>

</li>
<li>
<a href="admin.php?op=NewsMain"><img src="layout/images/admin/4.gif" border="0" alt=""></a><b>Administer news</b>
</li>	
</ul>

<ul class="imagebox">
<li>
<a href="admin.php?op=NewsWrite"><img src="layout/images/admin/5.gif" border="0" alt=""></a><b>Add news</b>
</li>
<li>
<a href="admin.php?op=NewsSelect"><img src="layout/images/admin/6.gif" border="0" alt=""></a><b>Select news</b>
</li>
<li>
<a href="admin.php?op=ModulesMain"><img src="layout/images/admin/7.gif" border="0" alt=""></a><b>Administer modules</b>
</li>
<li>
<a href="admin.php?op=Logout"><img src="layout/images/admin/8.gif" border="0" alt=""></a><b>Logout</b>
</li>	
</ul>

<!--MAIN-->
<div style="float:left;">
<form action="admin.php" method="post">
<label for="sitename" style="width:200px;">Name of the site: </label><input name="sitenamex" value="" style="width:100px;"><br>
<label for="adminmail" style="width:200px;">E-mail of the admin: </label><input name="adminmailx" value="" style="width:100px;">
<input type="hidden" name="op" value="ConfigSave">
<input type="submit" value="&Auml;ndern">
</form>
</div>
<!--MAIN-->

</div>

</div><!--end center-->

Das Problem besteht darin, dass die Listen nicht 100% in der Breite sind. So rückt der Code zwischen den Main-Kommentaren einfach immer hinter das letzte Bild. Ebenso schaffe ich es nicht, dass auch wirklich nur vier Bilder nebeneinander stehen. Je nach Länge der Link-Namen habe ich 4 oder mehr Bilder in einer Zeile.

Der Code für die Liste:

ul.imagebox {
      width: 100%;
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
}

ul.imagebox li {
      float: left;
	text-align: center;
	padding-top: 0.3em;
	padding-bottom: 0;
      margin: 1em 1em 1em 0;
}

ul.imagebox li a {
	text-decoration: none;
}

ul.imagebox li img {
	margin-top: 0.3em;
	display: block;
}

Leider kann ich kein clear nach den beiden Listen einfügen, denn dann würde ja auch der float meines logo2 aufgehoben. Eine absolute Breite bei
ul.imagebox von 600px führte im IE und in Firefox zu sehr unterschiedlichen Darstellungen und ist also auch keine zufriedenstellende Lösung.

Ich hoffe, das mein Problem klar geworden ist und ihr mir helfen könnt.