Sono alle prese con dei div che non vogliono sapere di accontentarmi.

Pagina con due div.
Il primo contiene al suo interno 6 div, affiancate a 2 a 2. Deve essere centrato orizzontalmente nella pagina. Larghezza fissata, altezza non conosciuta.
Il secondo, deve essere posto centrato nella pagina orizzontalmente, e posizionarsi sotto il primo div. Contiene un form.

Peccato che il secondo div venga sempre e solo sovrapposta al primo, e non mi riesca di posizionarla sotto!!

Codice css:
codice:
div.dettagli {
  width: 400px;
  position: absolute;
  left: 50%;
  margin-left: -200px;
  margin-top:-100px;
  background-color: #AAAAAA;
  display: block;
}

div.dt1 {
  clear: both;
  float: left;
  text-align: left;
  font-size: 100%;
  width: 100px;
  margin-top:10px;
  color: #123456;
}
div.dt2 {
  float: left;
  text-align: left;
  font-size: 100%;
  width: 299px;
  margin-top:10px;
}

form.dettagli {
  width: 400px;
  position: relative;
  left:50%;
  margin-left: -200px;
  border: 2px solid #6D8CC6;
  background-color: #D2E3F3;
  }
Codice html:
codice:
div class="dettagli">
  <h1>Dettagli</h1>
  <h2><?php echo $oggetto; ?></h2>
  <div class="dt1">Riferimento:</div><div class="dt2"><?php echo $riferimento; ?></div>
  <div class="dt1">Prestazione:</div><div class="dt2"><?php echo $prestazione; ?></div>
  <div class="dt1">Importo:</div><div class="dt2"><?php echo $importo; ?> €</div>
</div>
<div>
  <form class="dettagli" method="post" action="pag2.php?s=<?php echo $_SESSION['session_id']; ?>" name="pag2">
    <fieldset class="dettagli">
      <legend class="dettagli">Dettagli</legend>
      <div>
		    <input type="hidden" name="id" value="<?php echo $id; ?>">
        <input type="hidden" name="numero" value="<?php echo $numero; ?>">
	  		<input class="enter_inserimento" name="invia" type="submit" value="Vai">
  		</div>
    </fieldset>
  </form>
</div>
Dove sta l'errore?