Uno de los quebraderos de cabeza más habituales a la hora de maquetar una página aparece cuando pretendemos aplicar un layout de dos o más columnas, cuyo ancho sea porcentual y la suma total sea 100%, como por ejemplo dos columnas con un ancho cada una del 50%.
Al visualizarlo se ve correctamente, pero si añadimos un borde se descuadra completamente, produciéndose un salto de línea debido a que los divs ocuparán el ancho asignado más los píxeles del borde (dos por cada div), como podemos ver en este ejemplo.
Leyendo la revista Net magazine he visto un truco muy sencillo para evitar este problema, mediante una línea de CSS:
box-sizing: border-box;
Aplicando este estilo conseguimos que se renderice el borde dentro del elemento, y por tanto la anchura de éste no se ve incrementada, como podemos apreciar en este otro ejemplo.