Problema con "margin-top"

[ars1993]

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):

Código (html4strict) [Seleccionar] Expandir


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


Y el css:

Código (css) [Seleccionar] Expandir


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!

[EFEX]

Si queres moverlo libremente utiliza position:absolute y lo moves con margin..

Código (css) [Seleccionar] Expandir


position:absolute;
margin: 0px 10px 20px 0px;

[alan++]

Lo has probado con contenido?

[ars1993]

Con lo del position:absolute; lo he solucionado. Muchas gracias a ambos