Foros del Web » Creando para Internet » CSS »

Problema con % y borde.

Estas en el tema de Problema con % y borde. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/03/2006, 10:22
 
Fecha de Ingreso: febrero-2006
Mensajes: 150
Antigüedad: 11 años, 10 meses
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!
  #2 (permalink)  
Antiguo 05/03/2006, 11:50
Avatar de Hereje  
Fecha de Ingreso: junio-2002
Ubicación: Córdoba, Argentina
Mensajes: 439
Antigüedad: 15 años, 6 meses
Puntos: 2
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!
__________________
Sergio
  #3 (permalink)  
Antiguo 05/03/2006, 12:21
 
Fecha de Ingreso: febrero-2006
Mensajes: 150
Antigüedad: 11 años, 10 meses
Puntos: 6
Gracias maestro!!!, increible como aveces me puedo ahogar en un vaso de agua , va de maravilla!.

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



Gracias nuevamente!.
  #4 (permalink)  
Antiguo 05/03/2006, 13:19
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
es correcta ya que width:100% hace justamente eso, y el borde no esta incluido en el width, por eso produce overflow.
__________________
Internet Explorer SuckS
Download FireFox
  #5 (permalink)  
Antiguo 05/03/2006, 15:34
 
Fecha de Ingreso: febrero-2006
Mensajes: 150
Antigüedad: 11 años, 10 meses
Puntos: 6
Gracias a ambos .
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 23:32.