css - HTML input element wider than Containing Div

Question

I have an html element that is contained within a div. Height are dictated by the outer div and the height and width of the input control are 100%. At the most basic level, I am having an issue where the textbox extends past the right of the containing div.

Basic example code:

<div style="height:25px; width: 150px;">
     <input type="text" style="height:100%; width:100%"  />
</div>

The rendering of this control is far more complex than this, but still when the control is stripped down to this level, I have an issue where the textbox sticks out past the containing div.

Answer 1

You can use box-sizing:border-box to take care of this. Just put the following in your css file:

input{box-sizing:border-box} 

It means that border on the input box is actually inside the width of the input rather than being added onto the outside. This is what is making the input larger than the container.

Paul Irish has really good post explaining this technique http://paulirish.com/2012/box-sizing-border-box-ftw

The points he makes about padding also apply for the border.

There's even a compass mixin to make it easier to support older browsers. (http://compass-style.org/reference/compass/css3/box_sizing/)