Brainleaf
Web Resources

Molto spesso, soprattutto quando si è alle prime esperienze in CSS, si scopre che quando vengono inseriti degli elementi flottati all'interno di un elemento, questo "perde" la sua capacità di adattare automaticamente (senza che questa venga espressa) la propria altezza in base al contenuto. Ciò che succede è che gli elementi flottati "estendono" il float anche al div parent con un conseguente disallineamento del layout che si sta costruendo. La soluzione più ovvia ma sbagliata, è quella di applicare la proprietà overflow:auto al div parent, al fine di farlo estendere tanto da contenere i suoi elementi child. Vediamo invece come eliminare questo inconveniente attraverso CSS.

 

Immaginiamo quindi di avere la seguente situazione:


<div class="parent">
    <div class="child">Contenuto</div>
    <div class="child">Contenuto</div>
</div>

con il seguente css:


.parent {}
.child {
    float:left;
    width: 50%;
}

Chiaramente questo codice genererà l'errore di cui sopra, mentre con l'utilizzo di uno pseudo-elemento, nello specifico ::before, possiamo ovviare a questo problema ripulendo il div . parent dal float che riceve dagli elementi child al suo interno.


.parent::before {
    content: "";
    display: table;
    clear: both;
}

Joomla SEF URLs by Artio