FLOAT - Comportamento

[jann]

Nell'esempio 1 le voci di menu appaiono esternamente al livello in cui sono contenuti.

Nell'esempio 2 ho aggiunto al livello container la proprietà float:left.
Così le cose sembrano sistemarsi ma è stata solo una prova che sembra funzionare, non ho ben capito il perché :s
Qualcuno può spiegarmi il perché di questo comportamento? (al momento sto lavorando su firefox 1.0.2)


Inoltre su un manuale ho letto che un elemento flottante deve avere, secondo specifiche css, dichiarata la larghezza.
Definire dimensioni fisse mi sembra sbagliato perché incrementando le dimensioni del testo questo andrebbe a sovrapporsi, definire dimensioni in percentuale avrebbe lo stesso effetto.
La soluzione che mi viene in mente è la definizione della larghezza in em oppure non dichiarare la larghezza (ma qui sarei al di fuori degli standard). Sono sulla retta via o sto andando per la tangente alla grandissima?



Esempio 1

    <div id="container" style="border:1px solid gray; background-color:#f3ffeb;width:100%;">

      <div style="float:left;width:20%;display:block;">
        HOME
      </div>
      <div style="float:left;width:20%;display:block;">
        PAGINA 1
      </div>
      <div style="float:left;width:20%;display:block;">
        PAGINA 1
      </div>
      <div style="float:left;width:20%;display:block;">
        PAGINA 1
      </div>

    </div> 

Esempio 2

    <div id="container" style="float:left;border:1px solid gray; background-color:#f3ffeb;width:100%;">

      <div style="float:left;width:20%;display:block;">
        HOME
      </div>
      <div style="float:left;width:20%;display:block;">
        PAGINA 1
      </div>
      <div style="float:left;width:20%;display:block;">
        GALLERIA
      </div>
      <div style="float:left;width:20%;display:block;">
        FORUM
      </div>
    </div> 

Grazie!