Forza un elemento fluttuante o assolutamente posizionato per rimanere & # 8220; nel flusso & # 8221; con CSS
Domanda
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?
Soluzione
Di solito vado con overflow: nascosto
o overflow: auto
.
Altri suggerimenti
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 */
}
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.