Css div-Boxen nebeneinander

Hallo,
ich habe Thema welches auf den ersten Blick mit unzähligen ähnlichen Ansätzen funktionieren soll, tut es aber nicht.
Ich möchte viele Div-Boxen mit unbekannter Breite nebeneinander anordnen.
Was ist die Idee? Es soll sowas wie ein Tagesablauf dargestellt werden. Also Was weiß ich 8-9 Frühstück, 9-10:25 Einkaufen, 10:25-11:30 Hausputz usw. Die Länge der Boxen soll die Zeitblöcke darstellen.

Das Problem: Mal ist der Tag um 22 Uhr zu Ende, mal um 23 Uhr, mal um 17 Uhr.
Sobald es lönger wie 17 Uhr geht, bricht float:left die folgenden Boxen um.
Darauf habe ich ein umgebenes DIV hinzugefügt und overflow-x:scroll dazugepackt, sowie eine feste Breite.Der Scrollbalken erscheint, scrollt aber nicht, sondern bricht um.
<codediv.uhrzeitzellel{
height:25px;
width:128px;
float:left;
text-align:center;
border-right:1px dotted black;
}
}

div.hauptdiv
{
overflow:visible;
white-space:nowrap;
border:1px solid red;

}

 </head>
  <body>
  <div class="hauptdiv">  
<div class='uhrzeitzellel'>&nbsp;</div>  
<div class='uhrzeitzellel'>8:00</div>  
<div class='uhrzeitzellel'>9:00</div>  
<div class='uhrzeitzellel'>10:00</div>  
<div class='uhrzeitzellel'>11:00</div>  
<div class='uhrzeitzellel'>12:00</div>  
<div class='uhrzeitzellel'>13:00</div>  
<div class='uhrzeitzellel'>14:00</div>  
<div class='uhrzeitzellel'>15:00</div>  
<div class='uhrzeitzellel'>16:00</div>  
<div class='uhrzeitzellel'>17:00</div>  
<div class='uhrzeitzellel'>18:00</div>  
<div class='uhrzeitzellel'>19:00</div></div  

Es gab die Idee mit nowrap, display in allen Varianten. Passiert ist aber nichts. Mit ner Tabellle habe ich es auch versucht, habe es aer nicht hinbekommen in jeder Zeille unterschiedliche Spaltenbreiten zu bekommen. Der obrige Code ist ein Teil. Die Breiten sind natürlich fix. Darunter kommen die Tätigkeiten mit den Variablen Längen. Aber erstmal wollte ich es grundsätzlich lösen...

Irgendwer eine Idee?
mfG
tsunami