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!

[borgio3]

Provato su Opera 7.54 per Mac = nessun problema. Tutto sta al suo posto sia nel pirmo che nel secondo esempio.
Ingrandendo al 200% tutto è a posto.
What's problem?

Ciao Ciao

[Marcolino's]

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?

Dove l'hai letta la parte che ho evidenziato in grassetto?

[jann]

Originariamente inviato da borgio3
Provato su Opera 7.54 per Mac = nessun problema. Tutto sta al suo posto sia nel pirmo che nel secondo esempio.
Ingrandendo al 200% tutto è a posto.
What's problem?

Ciao Ciao

Allego un'immagine: è come si vede sul mio browser (firefox 1.0.2) il primo ed il secondo esempio.
Lì non ho ancora capito perché.
In coda all'immagine c'è quello che succede ingrandendo i caratteri.

In merito a questo punto ero andato un po oltre il 200%, non perché pensassi che qualcuno ingrandisse i caratteri a livelli improponibili (come ho fatto io) ma per capire come si comportava la struttura in determinate circostanze.
Immagino che avendo dato delle dimensioni fisse ai livelli questi giustamente non si allargano come avveniva con le celle nelle strutture tabellari....

[jann]

Originariamente inviato da Marcolino's
Dove l'hai letta la parte che ho evidenziato in grassetto?

L'ho letto su un manuale hoepli dedicato ai css.
Cascading Style Sheet, Fogli di stile per il web.

Dice che le gabbie galleggianti devono avere obbligatoriamente, secondo specifiche css, una larghezza definita attraverso la proprietà width o desunta da un elemento (viene fatto l'esempio di un'immagine o un oggetto) in essa contenuto.