posizionamento Div

**giannidef** · 29-01-2013, 19:08

Salve a tutti, qualcuno mi spiega perchè non riesco a posizionare il Div "Avanti" all'interno del Div "contenitore" subito dopo quello "centro"? Grazie

codice:

<!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>

#centro{ width:482px; height:140px; border:inset #039; margin: 5px auto;}
#contenitore{ width:700px; height:155px; border:inset #039; margin: 50px auto;}

	#indietro{width:80px; height:140px; float:left; margin:5px;  border: solid #6C6 1px}
	#avanti{width:80px; height:140px; float:right; margin:5px;  border: solid #6C6 1px;}

</style>
</head>

<body>


<div id="contenitore">
<div id="indietro" class="tasto">div sx</div>
<div id="centro">
div centrale
</div>
<div id="avanti" class="tasto">div dx</div>

</div>

</body>
</html>

**Prill** · 29-01-2013, 20:05

codice:

<div id="contenitore">
<div id="indietro" class="tasto">div sx</div>
<div id="avanti" class="tasto">div dx</div>
<div id="centro">div centrale</div>
</div>

**giannidef** · 29-01-2013, 20:38

Grazie mille Prill!! Ma come mai, nel codice, il Div centrale deve stare per ultimo? Forse perchè, nel mio caso, il Div centrale viene centrato già dal codice CSS? Te lo chiedo per il futuro. Di nuovo grazie.

**Prill** · 29-01-2013, 23:01

ti spiego con un esempio. Se copi e incolli

codice:

...
<style type="text/css">
#contenitore{ width:700px; height:155px;}
#centro{ height:140px; background-color:#00CC33 }
#flotta{width:80px; height:138px; float:right; margin-right:5px; border: 1px solid #000; }
</style>
</head>
<body>
<div id="contenitore">
<div id="flotta">flottante</div>
<div id="centro">div centrale</div>
</div>
...

potrai vedere che i due div sono sovrapposti. Quello flottante è sottratto al normale flusso della pagina e quello non flottante si dispone invece seguendolo (i due div sono sovrapposti).
Se invece inverto l'ordine (sposta nel codice il div flotta sotto quello centro), cosa accade? Il primo div occupa il suo spazio, genera un ritorno a capo ed ecco che il div flottante si pone a destra perché così gli abbiamo detto di fare), ma sull'altra riga.

E' esattamente quanto accade col tuo codice. Se inserisci il div centro dopo la colonna sinistra, manda a capo la colonna destra. Ecco perché dobbiamo inserire prima i due div col float, nello spazio fra i due poi risalirà il terzo.

Se usassimo tre div flottanti chiaramente l'ordine sarebbe diverso.

**giannidef** · 30-01-2013, 13:18

Sei stato chiarissimo e gentilissimo. Grazie mille!!

Discussione: posizionamento Div

Strumenti discussione

Ricerca discussione

Visualizza

posizionamento Div

Permessi di invio