Altezza automatica DIV con elementi flottanti

Inserendo elementi flottanti (float:left, float:right) all’interno di un DIV abbiamo la necessità di indicare al browser quando chiudere il DIV, soprattutto per quanto riguarda FIREFOX.

 

Spesso tendiamo a usare

<br clear="left|right|all">

 

oppure tramite CSS con lo style

clear:left|right|both

 

Possiamo però, specie se lo utilizziamo su un layout che deve diventare template questo codice CSS

#work{

/* il DIV con elementi flottanti al suo interno */

}

#work:after{

content: ".";
display: block;
height: 0;
clear: left;
visibility: hidden;

}

 

Lo pseudo elemento after consente di scrivere o assegnare stili dopo l’elemento sui cui è dichiarato.

Provare per credere 🙂

 

Thanks to positionseverything.net

Loading Facebook Comments ...

7 pensieri su “Altezza automatica DIV con elementi flottanti

  1. coach

    Interessante, ma credo poco pratico, almeno per la "chiusura" di un div… perchè personalmente, trovo più utile avere un’unica classe che mi faccia questo tipo di operazione invece di averne 1 per ogni elemento flottante.

    Rispondi
  2. Merlinox

    Cosa vuol dire un’unica classe che faccia questo tipo di operazione? Lo fai solo sul contenitore superiore "#work" indipendentemente da quello che hai dentro.

    Rispondi
  3. eaco

    Nel senso che se tu hai "n" classi dovrai avere anche "n" classi:after

    se invece ne crei una apposina avrai solo "n" classi più una apposita per il floating.

    Rispondi
  4. Merlinox

    Ok ok inteso così concordo.
    Il fine era solo quello di comunicare l’after.

    Ottima idea comunque quella di usare una classe per l’after.

    Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *