Hola a todos!.
Tengo un problema que quizás sea de fácil solución para Uds, alguien me podría explicar por qué pasa lo siguiente?:
1.- Creo un contenedor.
<div id="contenedor"></div>
2.- Meto dentro otro contenedor
<div id="contenedor"><div id="prueba"></div></div>
3.- Agrego contenido de prueba
<div id="contenedor">
<p>probando el contenedor bla bla bla</p>
<div id="prueba"><p>probando el contenedor bla bla bla</p></div>
</div>
Hasta aquí todo normal, pero al momento de definir estos estilos me sucede algo raro:
#contenedor {
width: 90%;
margin: auto;
}
#prueba {
width: 100%;
border: 1px solid #000000;
}
Según lo que yo creo que debería mostrarse, es el contenedor principal y dentro, el contenedor de prueba con su respectivo borde, pero todo esto sin "salirse" del contenedor principal.
Lo que veo en IE y en FF es que el borde de la izquierda se muestra correctamente, pero el contenedor PRUEBA muestra el borde 1 o 2px a la derecha del límite del contenedor principal (overflow). Si bien me parece mas o menos "lógico", porque el borde no está incluído en el ancho y alto según el modelo de cajas, pero no sé como decirle que necesito el 100% - 2px o algo por el estilo.
Hay alguna manera de dejar esto dentro del contenedor principal correctamente sin tener que definir anchos y altos fijos?
Hice la prueba de poner en el contenedor de prueba width:100%-2px; y graciosamente funcionó en IE y en FF, pero ese no es un atributo válido según el estándar.
Alguna idea?
Gracias!
Gracias maestro!!!, increible como aveces me puedo ahogar en un vaso de agua 
, va de maravilla!.
. 
