Salve...
Vorrei risolvere uno dei miei dubbi amletici sullo sviluppo di layout con css...
se io realizzo una pagina del genere:
Markup:
CSS:codice:<div id="container"> <div class="box"> testo testo testo testo </p></div> <div class="box"> testo1 testo1 testo1</p></div> <div class="box"> testo2 testo2 testo2</p></div> <div class="box"> testo3 testo3 testo3 testo3 </p></div> </div>
Mi chiedevo perchè mai su internet explorer vedevo il bordo del div container e su firefox vedevo solo il bordo superiore raddoppiato (cioè il div non si è esteso per inglobare gli altri 4 box) ?codice:#container {width: 760px; margin:10px;border:1px solid black} .box {width: 145px; margin:20px; float:left; background:#36f; color: #fff} .box p {margin:10px}
Questa risposta credo di essermela data già da solo, ovvero questa è la conseguenza che i 4 box contenuti dal div container sono settati come float quindi si staccano dal flusso, rendendo di fatto il container "vuoto". Che poi internet explorer decida di disegnare il bordo "attorno" ai 4 box è semplicemente frutto dell'arbitrio di bill gates e compagnia bella
Ma la domanda che nasce è la seguente: come faccio a far estendere un div contenitore per tutta la lunghezza del suo contenuto, quando al suo interno sono presenti solo div resi float ?
Esiste una soluzione ? Forse mediante l'utilizzo di un div "wrapper" ? ma con che proprietà ?
L'esempio di codice che ho postato è riferito ad un container e 4 box ma prevalentemente il mio problema era quello di realizzare un layout con elementi float al suo interno che abbia un div contenitore in cui utilizzare ad esempio un immagine di sfondo che lo differenzi dallo sfondo bianco dell'intero documento.

Rispondi quotando
