The 100% width HTML element problem

Question

When assigning some HTML elements (like a form input) 100% width - you can no longer apply any additional styles that might effect the width. Things like border or padding will cause the element to exceed 100%. This results in awkward elements that may be outside of their parent elements.

Since CSS doesn't support width: 100% - 2px; The only way I know around this is to use an absolute pixel width (width: 98px) or chop the element off at 100% which is not really an option.

<div style="overflow:hidden;">
<input style="width:100%; border: 1px solid #000;" />
</div>

Are they're any other ways around this?

Answer 1

Along with adding another div, the solution will soon be to use CSS 3 to add the box-sizing attribute to the CSS rules. This new CSS 3 value already works in IE 8 and all other browsers - so if you don't mind skipping IE 6 & 7 you can use it now!

textarea {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
}