Forza un elemento fluttuante o assolutamente posizionato per rimanere & # 8220; nel flusso & # 8221; con CSS

Question

Sto cercando un modo per forzare elementi fluttuati o posizionati in modo assoluto per rimanere nel flusso in css. Sto praticamente pensando che il CSS sia stupido per non avere qualcosa come flow: on flow: off per tenerlo nel flusso o eliminarlo.

Il problema è che voglio avere un elemento div con un'altezza variabile, ho un'immagine fluttuante a sinistra nel div e voglio che il div sia almeno all'altezza dell'immagine. Voglio anche che sia almeno abbastanza grande da contenere tutto il testo che è nel flusso (questo ovviamente non è un problema).

Ho bisogno che l'immagine sia in grado di variare di dimensioni. Attualmente sto usando una soluzione jQuery, ma sta agendo. Dal momento che non ho voglia di eseguire il debug e sento che dovrebbe essere una sorta di soluzione CSS, lo sto chiedendo.

Qualcuno sa come posso farlo?

Answer 1

Di solito vado con overflow: nascosto o overflow: auto .

Answer 2

Invece di usare un nuovo elemento per cancellare il div alla fine, puoi aggiungerlo al div css assoluto;

overflow: auto;

Ovviamente a IE piace giocare in modo diverso, quindi devi fornire anche una larghezza. Suppongo che il div assoluto abbia una larghezza impostata ... quindi puoi semplicemente impostarlo su quella larghezza.

.abs-div {
    position: absolute;
    overflow: auto;
    width: 160px; /* Replace with your width */
}

Answer 3

Un trucco che potrebbe funzionare nella tua situazione è quello di aggiungere un altro elemento all'interno del tuo div dopo il resto del contenuto che ha la proprietà clear CSS impostata su " entrambi " (o a sinistra, poiché l'immagine è a sinistra). ad esempio:

<br style="clear: both" />

Questo forzerà l'elemento sotto gli elementi fluttuati, che allungherà il div contenente.