CSS width and height set to 100% for input greater than its container

Question

I have a little css problem. I have a div container with a given size and absolute position. Inside I have some element and div. an element can be a button or an input in my example. The button complies with the rules and is 100% of the container, the entrance does not comply with the rules and is more than 100% of the container. What is happening and how can I fix it? jsfiddle - click on a widget to see its borders.

CSS

.Object { position: absolute; top: 10px; left: 10px; width: 100px; height: 100px; } .Object .Cover, .Object button, .Object input { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; z-index:0; } .Object button { padding: 2px; } .Object .Cover { cursor: move; z-index:1; } 

HTML

 <div class="Object" id="3b089a23-7732-e743-aea4-d9dcef359d4e" name="Unnamed Widget" style="height: 30px; "><div class="Cover"></div><input /></div> <div class="Object" id="e1bc0640-e049-eda8-05ac-0a99c21c6fe1" name="Unnamed Widget" style="height: 30px; top: 10px; left: 210px; "><div class="Cover"></div><button data-click="">Unnamed Button</button></div> 

Answer 1

104 px caused by the field model. When it is installed by default, it takes into account the borders and the addition of an element, since in this case the input has default borders (in this case ipx), it adds up to 4 and makes it "grow" from its parent.

If you add box-sizing: border-box; to my input selector (I moved it to a standalone selector) and set my own border styles, it works as you wish :)

 .Object input { box-sizing: border-box; width: 100%; height: 100%; /*border: 0; padding: 0;*/ border: 1px solid #ccc; background-color: #eee; } 

http://jsfiddle.net/K5D9z/13/

Hope this helps.

Note: afaik IE6, 7 does not work as expected, but you can just use a conditional comment and set its width / height in different ways.