Margine da div esterno

[freezone]

In questo contesto non capisco come fare:

<div id="1">
   <div id="2">
      <h1>titolo</h1>
   </div>
</div>

CSS:

#1 {
padding: 0px;
margin: 0px;
}

#2 {
padding: 0px;
margin: 10px;
}

#2 h1 {
margin: 5px 0px;
}

In IE vedo correttamente (credo) il titolo h1 che dista 5px dal bordo di div#2 e 15px dal bordo di div#1, mentre in FF mi trovo con il titolo h1 che dista 5px ma dal bordo di div#1, perchè? Come faccio? Avrei usato volentieri direttamente il padding sul div#1 ma ho visto la differenza di boxmodel tra FF ed IE per cui ho preferito aggiungere un div interno e spaziarlo con il margin, ho fatto bene o è una cavolata?
Grazie.

[Mich_]

Occhio alla sintassi!!
I nomi degli oggetti in una pagina HTML+CSS (inclusi i nomi degli id e delle classi) devono iniziare con una lettera e contenere solo lettere e numeri e uderscore (_).

IE interpreta anche se ci sono errori di quel tipo, altri browser no.

[freezone]

diciamo che ho usato dei nomi a caso, non sono numeri i nomi dei div era solo per comodità
In realtà si chiamano div id="colonna-1" e div id="div_offerte"
E' correttissima la tua precisazione, ma alla luce di questo c'è qualche altro motivo per cui si prende come riferimento il div più esterno per calcolare il margine piuttosto che quello più interno? Devo importare qualche parametro per la proprietà position forse?
Grazie mille e scusate l'ignoranza, so che ho ancora molto da studiare a riguardo.

[Mich_]

Se hai usato il position, devi imparare molte cose.... Inizia con questi articoli: I posizionamenti assoluti e Capire i posizionamenti relativi