Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/03/2006, 10:22
man0l0
 
Fecha de Ingreso: febrero-2006
Mensajes: 155
Antigüedad: 18 años, 1 mes
Puntos: 6
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!