CSS & maquetación

Como evitar que los input excedan el tamaño del div que los contiene

Siempre trato de ser practico y dar pocas explicaciones del porque llegamos a donde llegamos, así que si quieren saber porque falla pueden leer esto.

Para lograr que un input pase de esto:

A esto:

Al input que les está dando problemas pónganle los el siguiente selector:

.elemento{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

Básicamente va a sumar los padding y bordes que tenga aplicado el “elemento” a lo que el navegador considera un width del 100%.

NOTA: en ie7 no funciona para nada esta solución pero tranquilos que otro día pongo alguna solución para él.

Comentarios

  1. Pingback: Solución al box-model en ie7 usando jQuery | Capy.net

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>