Problema con % y borde.
 

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!

Probá sacandole el 100% a #prueba. Los bloques se "estiran" correctamente hasta el tamaño de su contenedor, respetando los border, padding y margin. Ésto siempre y cuando no se defina un width específico.

Saludos!

:aplauso: Gracias maestro!!!, increible como aveces me puedo ahogar en un vaso de agua :-D, va de maravilla!.

Con respecto al "problema", mi interpretación es incorrecta?, o son errores de cálculo de los browsers?.



Gracias nuevamente!.

es correcta ya que width:100% hace justamente eso, y el borde no esta incluido en el width, por eso produce overflow.

Gracias a ambos :-) .