Foros del Web » Creando para Internet » CSS »

Al aplicar margin-top a header también se desplaza la capa que lo rodea

Estas en el tema de Al aplicar margin-top a header también se desplaza la capa que lo rodea en el foro de CSS en Foros del Web. Mi duda es la siguiente... En esta sencilla estructutura de ejemplo cuando en el div cabeza se aplica un margin-top también se desplaza el div ...
  #1 (permalink)  
Antiguo 10/12/2010, 12:15
 
Fecha de Ingreso: febrero-2004
Ubicación: Mediterraneo
Mensajes: 64
Antigüedad: 13 años, 9 meses
Puntos: 2
Al aplicar margin-top a header también se desplaza la capa que lo rodea

Mi duda es la siguiente...

En esta sencilla estructutura de ejemplo cuando en el div cabeza se aplica un margin-top también se desplaza el div total hacia abajo.

Cuando al div total le aplicas overflow:hidden, funciona correctamente. Es decir solo se le aplica el magin-top a la capa cabeza.

¿Porque sucede?

He añadido el css en linea sólo para mostrarlo aquí.
-------------------------------------------------------------------------------------------------------
<div id="total" style="background-color:#636; overflow:hidden"><!--total-->
<div id="contenedor" style="background-color:#396; width:950px; margin:auto"><!--contenedor-->


<div id="cabeza" style="background-color:#903; height:50px; margin-top:100px"><!--cabeza-->
cabeza
</div><!--fin cabeza-->
<div id="contenido" style="background-color:#FC0; height:200px;"><!--contenido-->
contenido
</div><!--fin contenido-->
<div id="pie" style="background-color:#03C; height:50px"><!--pie-->
pie
</div><!--fin pie-->



</div><!--fin contenedor-->
</div><!--fin total-->
------------------------------------------------------------------------------------------------

Gracias.
  #2 (permalink)  
Antiguo 11/12/2010, 02:23
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: Al aplicar margin-top a header también se desplaza la capa que lo rodea

y si le agregas position relative , al div cabeza , de esa forma haria margin top a su contenedor, que en este caso, es el div contenedor
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 12/12/2010, 05:17
 
Fecha de Ingreso: febrero-2004
Ubicación: Mediterraneo
Mensajes: 64
Antigüedad: 13 años, 9 meses
Puntos: 2
Respuesta: Al aplicar margin-top a header también se desplaza la capa que lo rodea

Gracias Amigo Gaston

Con el position relative en el div cabeza sucede el mismo error.
Lo resuelve añadiendo el overflow:hidden en el div total.

Mi duda es porque hay que añadir esta opción(overflow:hidden) cuando lo logico sería que si aplico un margin-top al div cabeza este se debería solo aplicar al div cabeza y sin embargo arrastra hacia abajo al div total y a todo lo que hay en su interior.

Gracias

Etiquetas: desplaza, header, margin-top, capas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:49.