Today I came across a CSS fix (not hack) that solves an issue I've had to face numerous times in the past. The issue is caused when you have a text area with a width of 100%. That same text area has a margin and a padding, and those get added to the width of the text area. So you end up w/ a text area that extends outside of its parent container. Using the classes below, you can alter the default CSS box model used to calculate widths and heights of elements.It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.
.boxsizingBorder { box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; }
Sources:
https://developer.mozilla.org/En/CSS/Box-sizing
http://css-tricks.com/box-sizing/