ciao a tutti.

stavo cercando di capire il funzionamento di div che si annidano in altri div, e ho notato una cosa che accade con firefox e che non accade con IE.

mi spiego.
all'interno di un div contenitore devo inserire un div che sia caratterizzato da uno sfondo e da un bordo (deve tipo contenere un testo che funga da titolo ad una sezione).
ho quindi definito nel foglio di stile una classe "content" senza margini o padding e di colore bianco

codice:
.content {
	width: 550px;
	background-color: #FFFFFF;
	border-width: 0px;
	padding: 0px;
	margin: 0px;
	height: auto;
	position:relative;
	}
e poi una classe "titolo" nella quale definisco anche delle caratteristiche di font

codice:
	.titolo {
	font-family: Arial;
	font-size: 11px;
	font-style: normal;
	background-color:#B5B4B0;
	height: auto;
	width: 100%;
	border: 3px solid #000000;
        padding: 2px;
	color: #000000;
	margin-top:20px;
	}
quello che vorrei è che il div del titolo sia largo esattamente quanto il div contenitore, e che non sbordi a destra.

in IE questo accade
in firefox mi sborda esattamente di un numero di pixel pari a due volte il bordo, più due volte il padding (che dovrebbe controllare solo il margine interno e non quello esterno... almeno secondo quello che pensavo fosse logico...)



in questo caso mi sembra più sensato il comportamento di IE...
se le dimensioni del contenitore sono fissate, e se dico al browser che quelle del contenuto devono essere esattamente quelle del contenitore (width 100%) perchè firefox si ostina a allargarsi? certo, potrei tenerne conto, dire a firefox che il div "titolo" non è largo 100%, ma 550-(2+5)*2... solo che se faccio così, poi sarà IE a fare il div "titolo" troppo piccolo...

quindi:
come faccio a creare un codice che sia compatibile con entrambi, e che mi faccia un div "titolo" largo esattamente quando "contenitore"?


grazie della pazienza, e dell'aiuto

andrea