Subcapa hace desplazar la Capa principal

[Raulii]

Buenas Foreros!!

Tengo una duda en CSS, llevo tiempo intentando buscar una respuesta clara.. aver si pueden ayudarme.

Primero el ejemplo en concreto.

Código:

body{
margin:0;
padding:0;
}
#capa_principal{
margin:5px 100px 0 0;
width:auto;
background-color:#CC0000;
height:80px;
}
#capa_principal .subcapa{
margin:20px 20px 0 50px;
width:auto;
background-color:#000;
}
.subcapa h1{
margin:0;
}

Probarlo utilizando el FIREFOX, comprobarán que la "subcapa" arrastra la "capa_principal". Se supone que la "capa_principal" deberia quedar a 5px del margen superior, mientras que la "subcapa" a 20px del margen superior de la "capa_principal", verdad??.
Utilizando el IE (Interner Explorer) al menos en la versión 6, se ve correctamente.

Volviendo al Ejemplo:

Código:

body{
margin:0;
padding:0;
}
#capa_principal{
margin:5px 100px 0 0;
width:auto;
background-color:#CC0000;
height:80px;
border:1px solid #000; /* Linea recien añadida */
}
#capa_principal .subcapa{
margin:20px 20px 0 50px;
width:auto;
background-color:#000;
}
.subcapa h1{
margin:0;
}

He agregado un borde simple a la "capa_principal", volver a comprobar el ejemplo en FireFox. Ahora, se debería ver correctamente, como en IE.

¿Por qué? Tan solo agregue un borde a la "capa_principal".

El problema es que en mi plantilla no debo agregar dicho borde, entonces pasa como al principio.

Nta: Si quitan el margen:0 de la etiqueta H1, también arrastrará la "capa_principal", siempre que esta no tenga el borde definido.

Alguien puede darme una respuesta clara, del ¿Por qué?.

Gracias ;).

[Eourus]

No he leido el código todavía, pero por lo que comentas ... al ponerle el border la subcapa se desplaza porque crece su ancho y no cabe. Osea tendria de ancho lo que le pongas en el widht + el tamaño del borde ;)

El width:auto equivale a un 100% a eso sumale 2 píxeles del borde, uno por cada lado

[Raulii]

Hola Eourus, gracias por tu opinión.

Lo que dices no es asi.. quiza mal interpretaste o bien te recomiendo probar el ejemplo primero, jeje.

La "subcapa" se desplaza cuando la "capa_principal" no lleva borde, de lo contrario, se ve correctamente. Que yo sepa no hay problemas de ancho o altura.

Insisto en que prueben el ejemplo dado.

Gracias ;)

[Eourus]

Ok, lo estoy probando y tienes razón.

A ver, una cosa. Capa principal es la roja, la negra es la subcapa.

¿Exactamente que quieres hacer?

Tener la capa roja y dentro la negra supongo, pero que no se quede pegada la negra a la parte superior de la roja ¿no?. Lo digo porque veo que has usado los margin ...

[Eourus]

bueno a ver, prueba esto:

body{
margin:0;
padding:0;
}
#capa_principal{
margin:5px 100px 0 0;
width:auto;
background-color:red;
height:80px;
border:1px solid #000; /* Linea recien añadida */
}
.subcapa{

width:auto;
background-color:blue;
}
.subcapa h1{
margin:0;
}

[Raulii]

La negra "subcapa" debe estar a 20px de la "capa_principal" sin que esta sea arrastrada como sucede en el primer ejemplo.

Ambas capas tienen margin definido, la primera queda a 5px del margen superior de la web, y la segunda queda a 20px del margen superior de la capa principal.

Si vuelves a comprobar.. funciona correctamente utilizando el segundo ejemplo (anadiendo un borde a la capa principal) pero ese borde, lo quiero quitar y que se siga viendo bien.

Además quiero saber el por que sucede esto.

Gracias ;)

[Eourus]

Pues no tengo ni idea de porque se comporta. Pero si quieres un solución, utiliza capas flotantes, ya verás como se resuelve rapidamente.