margini bordi sballati con 2 div e float

**myotis** · 17-11-2010, 19:55

Miao...

Ho un problemino che per voi sarà sicuramente di facile risoluzione (ho cercato nelle guide ma non ho trovato una risposta precisa al mio problema).

Ho due semplicissimi div di cui uno allineato a destra tramite float:right

codice:

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>


<head>
	<title></title>


	<style type="text/css">
	

	body { font-size: 120%; font-family: Trebuchet MS, Arial, sans-serif; }


	div { margin: 5px; padding: 5px;  border: 2px solid black; }
					

	.primo { background-color: #D1B35B; float: right; }


	.secondo { background-color: #FEA9CA; }	


             </style>


</head>


<body>


<div class="primo">contenuto del primo div</div>

<div class="secondo">contenuto del secondo div</div>


</body>


</html>

Se visualizzate il tutto nel browser vedrete subito cosa non va: div class="primo" appare sì a destra, ma spostato verso il basso di qualche px rispetto a div="secondo".

Se si tolgono margin e padding dalla dichiaraz. di stile di div il problema scompare (riporto il codice solo per vostra comodità... spero

)

codice:

<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

<html>


<head>
	<title></title>


	<style type="text/css">
	

	body { font-size: 120%; font-family: Trebuchet MS, Arial, sans-serif; }


	div { border: 2px solid black; }
					

	.primo { background-color: #D1B35B; float: right; }


	.secondo { background-color: #FEA9CA; }	


             </style>


</head>


<body>


<div class="primo">contenuto del primo div</div>

<div class="secondo">contenuto del secondo div</div>


</body>


</html>

Non credo sia normale, dev'essermi sfuggito qualcosa.
Come fare per eliminare questo "sbalzo" fra i due bordi e renderli "allineati" mantenendo padding e margin nel div?

Grazie!

**gabar-el** · 18-11-2010, 11:35

Mi sembra manchino molte dichiarazioni.
La larghezza dei div qual è?
In ogni modo vedi bene nelle guide che è spiegato come posizionare due div.
Dichiararne solo uno allineato right non è una soluzione ottimale ad ogni modo.

**myotis** · 25-11-2010, 16:13

Originariamente inviato da gabar-el
Mi sembra manchino molte dichiarazioni.
La larghezza dei div qual è?
In ogni modo vedi bene nelle guide che è spiegato come posizionare due div.
Dichiararne solo uno allineato right non è una soluzione ottimale ad ogni modo.

Guarda, a dire il vero non avevo impostato alcuna larghezza (width) per i div visto che al momento mi interessava capire bene come funzionasse il meccanismo di allineamento.
So bene che creare due div di cui uno solo è impostato su "float: right" non è molto ortodosso ma mi serviva per fare delle prove.
Erano i primi giorni che studiavo "float" ed ero abbastanza confuso, ma dopo un bel po' di prove e riprove credo di aver capito.

Il problema qui si presenta indipendentemente dalla larghezza dei div e dal loro allineamento e ora ho capito perchè: semplicemente, avendo questo:

codice:

div { margin: 5px; padding: 5px;  border: 2px solid black; }

tutti i div della pagina hanno "margin" e "padding" di 5px.
E' chiaro che se posiziono un div con "float: right" e lascio che l'altro div ci "scorra attorno" quello posizionato a destra verrà a trovarsi all'interno del div che non ha "float" impostato.
Trovandosi al suo interno, viene applicato "padding" e "margin" tra i bordi del div interno e quelli del div esterno - ecco perchè se hai visto il codice i bordi risultano non allineati.

Per ovviare al problema basta togliere "margin" e "padding" dalla dich. di stile della classe div
oppure modificare lo stile della classe a cui appartiene il primo div (quello con float: right):

codice:

.primo { background-color: #D1B35B; float: right; margin: 0px; padding: 0px; }

Tutto qua. Ora ho risolto.

Grazie per la risposta - non preoccuparti se non capisci nulla di questo papiro che ho scritto, l'importante è che abbia capito io...
era solo un errore da niubbo...

Ciao!

Discussione: margini bordi sballati con 2 div e float

Strumenti discussione

Ricerca discussione

Visualizza

margini bordi sballati con 2 div e float

Permessi di invio