Hallo Robert
Ich versuche Dir mal zu erklären was das Problem ist:
Wenn Du, wie Du es gelöst hast, in einem Div Elemente floaten lässt, dann hat das umschliessende Element keine Höhe mehr. Du musst als nach den floatenden Elementen einen clear: both/left/right unterbringen, damit die Browser dem umschließenden Element wieder eine Höhe geben. Unschön, aber machbar ist das mit einem <div style="clear:both;" />
Um den Effekt zu testen solltes Du einfach einmal in ein Testdokument aufbauen, das nur aus dem relevanten Code besteht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {background-color: white;}
#container {border: 1px solid red;width: auto;}
#eins {float: left;width: 100px;height: 30px;border: 1px solid green;}
#zwei {float: left;width: 100px;height: 30px;border: 1px solid blue;}
#drei {float: left;width: 100px;height: 30px;border: 1px solid gray;}
</style>
</head>
<body>
<div id="container">
<div id="eins"></div>
<div id="zwei"></div>
<div id="drei"></div>
<div style="clear: left;" />
</div>
</body>
</html>
Wenn Du jetzt den "clearenden" Div entfernst, oder wieder rein nimmst, siehst Du was ich meine ;o)
Schönen Gruß