Buenas, tengo un pequeño problema al situar las cosas en una web con css.

Éste es el un trozo del HTML que tengo (es donde tengo el problema):

<div class = "fons">
	<div class = "capcalera">
		<div class = "name">				
		</div> <!--name-->
        </div>
</div>
 

Y el css:

body {
	background: url("media/background.gif");
}
 
 
.fons {
	height: 1000px;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 100px;
	background-color: green;
}
 
.capcalera{
	height: 200px;
	width: 1200px;
	margin-top: 200px;	
	background-color: white;
}
 

Le doy los atributos background-color para ver como quedan las cosas. El problema está en que cuando quiero situar el div "capcalera" que está dentro del div "fons" si le doy margin-top:10px (por ejemplo) lo que me ocurre es que esos 10px se le suman al margin-top del div "fons" y no es éso lo que quiero.

Quisiera poder desplazar el div capcalera (que es de color blanco) teniendo en cuenta que está dentro del div "fons" pero lo quisiera mover de manera independiente. Quisiera que los margin-top de ambos no se "sumaran", por decirlo de alguna forma.


Alguien me puede proponer una solucion? Gracias!

Lo has probado con contenido?