Text untereinander bündig anordnen

[J. K.]

Hallo!

Ich habe ein kleines Problem bei der Erstellung eines Inhaltsverzeichnisses. Die einzelnen Einträge sollen dabei folgendermaßen eingerückt erscheinen:

1  Kapitel Eins
   1.1  Eine Ebene tiefer
        1.1.1  Noch eine Ebene tiefer
2  Wieder die erste Ebene

Die Einträge sollen also so weit eingerückt werden, daß sie mit dem Text des darüberstehenden Eintrages bündig abschließen.

Das ganze hab ich mit Divs fester Breite folgendermaßen versucht:

  
<style type="text/css">  
   .label1, .label2, .label3 {  
      float:left;  
      }  
   .label1 {  
      width: 2em;  
      }  
   .label2 {  
      margin-left: 2em;  
      width: 3em;  
      }  
   .label3 {  
      margin-left: 5em;  
      width: 4em;  
      }  
</style>  

  
<h1>Inhaltsverzeichnis</h1>  
  
 <div class="label1">1</div><div>Erstes Kapitel</div>  
  <div class="label2">1.1</div><div>Ein untergeordneter Abschnitt</div>  
   <div class="label3">1.1.1</div><div>Noch 'ne Ebene tiefer</div>

Gecko stellt das ganze ungefähr wie gewünscht dar, ganz genau stimmt die Ausrichtung allerdings nicht, und im IE ist alles völlig verschoben, margin-left ist anscheinend viel zu groß.

Was mache ich falsch? Für Antworten schonmal vielen Dank!
J. K.