The 100% width HTML element problem
- by Xeoncross
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?