Tip per il float: perchè non si vede lo sfondo?
Capita talvolta di avere un div contenitore con due colonne flottanti.
Se a questo div contenitore abbiamo associato uno sfondo, succede che magicamente questo scompaia nell’ordinare alle due colonne di essere flottanti. Aiuto! Dov’è scomparso?
Niente paura, la soluzione è più semplice di quanto possa sembrare. Basta infatti assegnare al div contenitore (a meno che questo non sia centrato o abbia altre caratteristiche che vadano in contrasto), la proprietà float: left;
Nel caso appunto che questo div contenitore poi, abbia altre caratteristiche che vanno in contrasto (una centratura, un position relative o absolute, etc) basta che creiate un ulteriore div all’interno di questo che possegga appunto la caratteristica di div flottante.
Trucchi e misteri che si imparano solo lavorandoci su :°)
L'Autore
Laura Gargiulo, webdesigner freelance. Web architect senior, esperta xhtml, css, usabilità, design, cms, webmarketing e Seo, Wordpress specialist. Membro del progetto di prossima pubblicazione Piperita Lab e dell'IWA Italy Visita il mio sito personale Lauryn.it e contattami pure per un preventivo gratuito.
Add to Google
3 Commenti
Tra l’altro capita anche che il div contenitore se non gli viene settata un’altezza fissa, non si veda, sopratutto se non c’è del testo al suo interno, ma immediatamente le 2 colonne flottanti.
E si risolve inserendo prima della chiusura del div contenitore un div con style=”clear: both;”
E’ esattamente lo stesso problema. O lo si risolve aggiungendo semplicemente float: left; al div contenitore delle due colonne, oppure un div ulteriore, come suggerisci tu, al di sotto, con un clear: left; o both;
Direi che il primo è un metodo più “pulito” e non setterei mai l’altezza fissa ad un div se non si ha l’assoluta certezza che il contenuto riempia esattamente e allo stesso modo in tutti i browser, il div stesso
Beh, solitamente non uso mai un’altezza fissa, semmai utilizzo il min-height ( che con un piccolo hack funziona anche su internet explorer)
Ad esempio div#contenitore{
height: 100px;
min-height: 100px;
height: auto !important;
}
Comunque personalmente preferisco utilizzare il clear, in modo che se dovessi inserire degli uteriori div nel contenitore, non debba settare loro float o altro
Poi son gusti ovviamente 