HTML input element wider than Containing Div

  • 207 views
  • 1 minute read
0 Shares
0
0
0
0
0
0
0
0
Shares
0
0
0
0
0
0

Following code is not working

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

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/)

Previous Article
Next Article
You May Also Like