perche se costruisco una struttura del tipo
perchè dreamweaver nell'interfaccia di design mostra il div più esterno che non si allunga per contenere gli altri div al suo interno ma solo contenuti che non siano div?Codice PHP:...
<body>
<div style="width:100%;">
<div style="width:800px;">
<div>contenitore1</div>
<div>contenitore2</div>
<div>contenitore3</div>
</div>
</div>
</body>
premesso che non uso DW, dubito che il codice che hai postato sia sufficiente a darti risposta (non si sa che dtd usi, se ci sono altri stili collegati agli elementi ...)
premesso anche che "contenitore ecc." non si sa se è un heading, un paragrafo o che altro
detto ciò, l'anteprima di DW non è attendibile, dovresti sempre fare riferimento alla visualizzazione sui browser
ok scusa per la poca chiarezza, allora se scrivo questo codice:
Funziona tutto bene, se però scrivo:Codice PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<style>
div{
border:1px #000000 solid;
}
</style>
</head>
<body>
<div style="width:100%;" align="center">
<div style="width:800px;">
<div style="width:100px; float:left;">testo1</div>
<div style="width:100px;">testo2</div>
</div>
</div>
</body>
</html>
e cioè mettendo il float anche al div con testo2 i due div più esterni si appiattiscono, perchè?Codice PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<style>
div{
border:1px #000000 solid;
}
</style>
</head>
<body>
<div style="width:100%;" align="center">
<div style="width:800px;">
<div style="width:100px; float:left;">testo1</div>
<div style="width:100px; float:left;">testo2</div>
</div>
</div>
</body>
</html>
Se provate i codici vi accorgete subito quello che intendo
manca il clear
perdonami, che sarebbe il clear?
Ho visto cos'è il clear, ma io voglio che quei due div interni rimangano sulla stessa riga, solo che se li affianco usando i float:left i div più esterni si appiattiscono, invece se il float lo uso solo con il primo i div più esterni si allungano per ospitare i due più interni
forse non capisco io. Se usi i float ma non ci metti poi il clear è normale che i div "esterni" non ti si allungano assieme a quelli interni: il float rimuove gli elementi dal flusso del documento.Originariamente inviato da Bhaltazar
Ho visto cos'è il clear, ma io voglio che quei due div interni rimangano sulla stessa riga, solo che se li affianco usando i float:left i div più esterni si appiattiscono,
--> Float+clear = div affiancati [sulla stessa riga] che "restano" nel flusso del documento <--
può essere, visto che uno dei blocchi non viene rimosso dal flusso. Occhio però che se usi una soluzione senza il clearing, non hai la sicurezza che tutti i browser si comportino nella stessa manierainvece se il float lo uso solo con il primo i div più esterni si allungano per ospitare i due più interni
E questo non lo sapevo, però ho provato a mettere clear:both nel primo div più interno, e succede che i div più interni si mettono uno sotto l'altro allineati a sinistra ma uno sotto l'altro, io invece li tutti e due sulla stessa rigaOriginariamente inviato da Myaku
forse non capisco io. Se usi i float ma non ci metti poi il clear è normale che i div "esterni" non ti si allungano assieme a quelli interni: il float rimuove gli elementi dal flusso del documento.
--> Float+clear = div affiancati [sulla stessa riga] che "restano" nel flusso del documento <--
Ok, grazie per l'infopuò essere, visto che uno dei blocchi non viene rimosso dal flusso. Occhio però che se usi una soluzione senza il clearing, non hai la sicurezza che tutti i browser si comportino nella stessa maniera
il clear va in un elemento che segue quelli con il float. Dai uno sguardo al capitolo sui float della guida di base ai css su css.html.it, dovrebbe esserti spiegato.Originariamente inviato da Bhaltazar
E questo non lo sapevo, però ho provato a mettere clear:both nel primo div più interno, e succede che i div più interni si mettono uno sotto l'altro allineati a sinistra ma uno sotto l'altro, io invece li tutti e due sulla stessa riga
oppure usi il metodo di fcaldera (cerca fabclearing)
provato fabclearing! figata! funziona!
Grazie mille a te e a chi ha fatto le classi!
Permessi di invio
Rispondi quotando