Margini negativi e unità percentuali

[pierofix]

'Giorno.

Scenario
Immaginate di avere una struttura di markup simile:

<div>
   <h1>Titolo</h1>
   

Testo.</p>
</div>

Ora, nel CSS diciamo questo:

div { padding:10% }
h1 { margin:-10% }

Lo scopo:

1. dare un padding al div in modo tale che tutto il testo in esso contenuto sia distaccato di 10% dal bordo;
   
2. allo stesso tempo, il titolo deve rinnegare la distanziatura e riappiccicarsi al bordo del div.

Problema
Eh già, la matematica non è un'opinione. Sottraendo il 10% e risommandolo, il risultato non è 100%. Pertanto, l'h1 non si ritrova esattamente aderente ai bordi dell'area.

Richiesta
Semplicemente, avete qualche idea?

Caso pratico
Sto smanettando per realizzare il layout che forse darà veste al mio sito (se mai ci sarà). La prima bozza la trovate qui:

- www.re1.it/pierofix/prova_layout/

IE non l'ho ancora hahato, mentre con FF e Opera dovrebbe andare abbastanza bene. Il titolo della pagina (quello rosso su sfondo verdin-giallino) è l'incriminato.

[Mich_]

La matematica non e` un'opinione:
(x - 10%) + 11% = x
Infatti scrivendolo in termini di frazioni:
y = (x - x*10/100)
(y + y*11/100) ~= x

Prova a sviluppare: vedrai che l'errore e` molto piccolo, 1/1000: trascurabile per la maggior parte delle risoluzioni

In conclusione:
div { padding:10%; }
h1 { margin:-11%; }

[pierofix]

Il margine negativo dell'intestazione è già impostato a 11%, però provando ad allargare o ridurre la finestra browser, la spaziatura laterale rimane superiore o inferiore (accavallandosi con il menu).

Proverò a ragionare meglio sulla proporzione (e a giocare con i decimali) e sugli z-index degli elementi. Grazie mille!