Vi posto la pagina che sto facendo
http://sedicisi.altervista.org/emiliaromagna2.htm

Ho il problema che il primo elenco e il secondo elenco non vengono uno sotto l'altro. Ho ricontrollato in continuazione il codice ed è come se ci fosse un limite ai div nidificati.

vi posto il codice

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>
<link href="/stylesite.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>

<body>
<div id="login">
<p align="center">Nickname</p>
<p align="left">Nome Utente</p>
<p align="left">Password</p>
<p align="right">Login </p>
</div>
<div id="contenuto">
<div class="alto">
<div align="center">
<h2>Scegli la tua provincia</h2>


[img]/Immagini/emiliaromagna-copia.gif[/img] </p>
</div>
</div>
<div id="sx">

<! --QUA c'è l'errore che non vorrei...questo elenco dovrebbe risultare sopra>
<div class="elenco">
<div class="icona">
[img]/Immagini/piccolo.jpg[/img]
</div>
<div class="disco"> Single dinner
</div>
</div>

<! --questo elenco invece dovrebbe risultare sotto senza sovrapporsi>
<div class="elenco">Secondo elenco Secondo elenco Secondo elenco Secondo elenco Secondo elenco
</div>
<div class="elenco">Terzo Elenco Terzo Elenco Terzo Elenco Terzo Elenco Terzo Elenco Terzo Elenco
</div>
</div>
<div id="dx"> ciccio ciccio cicciociccio ciccio cicciociccio ciccio cicciociccio
ciccio ciccio </div>
</div>
</body>
</html>
e il Css

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0000CC;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
border: 0px;
}

#contenuto {margin-left:0%; margin-top:0px; width:70%; position:absolute;}

#login {margin-left:70%; margin-top:0%; width:30%; position:absolute;}

.alto {margin-left:0%; margin-top:0%; width:100%;}

#sx {margin-left:0%; margin-top:0%; width:50%; position:absolute;}

#dx {margin-left:50%; margin-top:0%; width:50%; position:absolute;}

.elenco {margin-left:5%; width:90%;}

.icona {margin-left:0%; width:20%; margin-top:0%; position:absolute;}

.disco {margin-left:20%; width:80%; margin-top:0%; position:absolute;}
Nel codice html ho segnato i due elenchi che vorrei vedere uno sotto l'altro
ah...dimenticavo:se tolgo i div "icona" e "disco" il problema non si ripresenta a meno che non inserisca un immagine

Qualche soluzione?